Trying to change width on hover using css

Question

I've done this before and I don't understand why it's not working. I'm trying to do this: http://jsfiddle.net/geometron/u3M6r/1/

<ul>
    <li><a href="content1.html"> Demo 1     </a></li>
    <li><a href="content2.html"> Demo 2     </a></li>
    <li><a href="content3.html"> Demo 3     </a></li>
    <li><a href="content4.html"> Demo 4     </a></li>
    <li><a href="content5.html"> Demo 5     </a></li>
    <li><a href="content6.html"> Demo 6     </a></li>
</ul>

but with a ul so I can have less css. This is what I'm getting: http://jsfiddle.net/geometron/6DUL9/

The width doesn't seem to want to change.

What am I doing wrong?

Possible duplicate of http://stackoverflow.com/questions/1423294/setting-the-width-of-inline-elements — Vinícius Moraes, May 14 '13 at 16:04

Martin Turjak · Answer 1 · 2013-05-14T16:59:12.773

1

You need to display the anchor tag as a block type element, otherwise it will not take the width property.

So try adding:

display:block;

or

display:inline-block;

to your ul li a selector.

Here I add an update to your jsfiddle for illustration.

edited May 14 '13 at 16:59

answered May 14 '13 at 16:01

Martin Turjak

20,896
5
56
76

score 1 · Answer 2 · answered May 14 '13 at 16:04

Tag a behaves a bit bad sometimes, especially when you try to specify the size.

A workaround is to specify display: inline-block for your a-tag. (It will however mess up the rest of your style.) See jsFiddle

Better might be to change the width property of the <li>:s.

score 0 · Answer 3 · answered May 14 '13 at 15:59

0

You try to change the width of an inline element a. To do this you need to add display: inline-block; to it.

answered May 14 '13 at 15:59

Garrin

541
1
3
8

score 0 · Answer 4 · answered May 14 '13 at 15:59

0

a is an inline element. You cannot set a width on it directly. Add display:inline-block and it should work.

answered May 14 '13 at 15:59

Niet the Dark Absol

320,036
81
464
592

score 0 · Answer 5 · answered May 14 '13 at 16:03

Try this in your HTML

  <li  class="item1"><a href="content1.html"> Demo 1     </a></li>
    <li><a href="content2.html"> Demo 2     </a></li>
    <li><a href="content3.html"> Demo 3     </a></li>
    <li><a href="content4.html"> Demo 4     </a></li>
    <li><a href="content5.html"> Demo 5     </a></li>
    <li><a href="content6.html"> Demo 6     </a></li>

And try this in you CSS

.item1:hover
{
/*border-radius:100px;*/
height:25px;
left: 0px;
top: 130px;
width:250px;
background-color: #FFF;
}

score 0 · Answer 6 · answered Sep 06 '17 at 07:19

<ul class = "sample">
<li><a href="content1.html"> Demo 1     </a></li>
<li><a href="content2.html"> Demo 2     </a></li>
<li><a href="content3.html"> Demo 3     </a></li>
<li><a href="content4.html"> Demo 4     </a></li>
<li><a href="content5.html"> Demo 5     </a></li>
<li><a href="content6.html"> Demo 6     </a></li>

CSS File

.sample li a:hover {
    padding: 4px 10px;
    }

Trying to change width on hover using css

6 Answers6