Side links with increased size on hover without breaking other links

I have a goal that I'm trying to accomplish with just HTML and CSS: with an inline list of links that grow in size on hover and change fonts (this caused odd problems before),

A) Pointing to one link must not break other links.

B) Keep it dynamic so you don't have to adjust the CSS for every new link.

C) If margin: 0 20px 0 20px, it should be from the ends of the text. This looks much cleaner as it spacing links (see example of what not to do). Fixed-width containers usually break this.

D) When hovering text, the text should remain vertically and horizontally centered.

E) Please try to keep only HTML and CSS. If JS or JQ are included in it, it would be more difficult to implement my lack of knowledge of languages ​​and the fact that the JSFiddle is just a stripped down example instead of my actual page.

My best option now fits the first two and the last criteria without encountering the third, and it uses tables (I know):

JSFiddle

Or code:

<table><tr>
    <td><div>ONE</div></td>
    <td><div>TWO</div></td>
    <td><div>THREE</div></td>
    <td><div>FOUR</div></td>
    <td><div>FIVE</div></td>
</tr></table>

      

AND...

div:hover {
    font-size: 130%;
    font-family: comic sans ms;
}
div {
    width: 10px;
    margin: 0 30px 0 30px;
    height: 20px;
}

      

The problem is that the margin is measured from the div, not the text, so I would have to bind the margin to each link. Also, the hover will remind you that the font / link is moving down and to the right, breaking the D pointer.

It works dynamically as long as the text is not too long, but the freeze upsets other links. It also violates D.

Any help would be appreciated.

+3


source to share


1 answer


Vertical alignment for inline text is easily handled with the line-height

. Make sure the line heights are the same for regular and large font sizes. For example. for plain text I used line-height: 1.5em

, for large text I used font-size: 130%; line-height: 1.15385em;

. 1.30 x 1.15385 = 1.50

The main problem I see is that when the browser hovers over it needs the text at its original size for the layout, but it also needs the larger text in order to display. One solution I see duplicates the link text and only shows one version depending on the hover state:

HTML:

<ul>
<li><a href="#"><span>link 1</span><span>link 1</span></a>
<li><a href="#"><span>link 2, with some long text</span><span>link 2, with some long text</span></a>
<li><a href="#"><span>link 3</span><span>link 3</span></a>
</ul>

      

CSS

ul, li {margin: 0; padding: 0;}
li { list-style-type: none; display: inline-block; line-height: 1.5em; }

li { border: 1px dotted red; position: relative; }
li a span:first-child { padding: 0 30px; }
li a span:last-child { position: absolute; width: 100%; left: 0; font-size: 130%; line-height: 1.15385em; text-align: center; visibility: hidden; }
li:hover a span:first-child { visibility: hidden; }
li:hover a span:last-child { visibility: visible; }

      

http://jsfiddle.net/g16Ldusx/2/

Instead of duplicating the link text in HTML, I would probably duplicate it using javacript.



If you don't want duplication and really don't want javascript, you can use pseudo-elements :before

and :after

instead, and put the link text in an HTML5 data attribute. Not sure how good browser support is for this.

HTML:

<ul>
<li><a href="#" data-text="link 1"></a>
<li><a href="#" data-text="link 2, with some long text"></a>
<li><a href="#" data-text="link 3"></a>
</ul>

      

CSS

ul, li {margin: 0; padding: 0;}
li { list-style-type: none; display: inline-block; line-height: 1.5em; }

li { border: 1px dotted red; position: relative; }
li a:after { content: attr(data-text); padding: 0 30px; }
li:hover a:after { visibility: hidden; }
li:hover a:before { content: attr(data-text); position: absolute; width: 100%; font-size: 130%; line-height: 1.15385em; text-align: center; }

      

http://jsfiddle.net/kyad4tfh/

Also note that Requirements A and C may conflict with each other. The margins between elements should be large enough to fit to increase the width of the text.

0


source







All Articles