hover effect for li list

Question

I have an <ol>list to which I have added color. This is working fine. But when I add a div, which has 2 tags the hover effect is not applying.

In my code, the hover is not happening for second <li>.

HTML:

<div class="test">
  <ol>
    <a href="#"><li><div><span>test 1</span><p>Mvdshe</p></div></li></a>
    <a href="#"><li><div><span>test 12</span><p>sdgmksgb</p></div>
    <div class="icons"><a href="#" class="play"></a><span class="dividr"></span><a href="#" class="suffle"></a></div></li></a>
    <a href="#"><li><div><span>test 11</span><p>Name dgdg</p></div></li></a>
  </ol>
</div>

CSS:

.test{ position:relative; height:auto; width:100%}
.test ol{margin:0; padding:0; font:normal 30px 'SegoeWPLight', Verdana, Geneva, sans-serif; color:#afafaf; text-align:left; list-style:none; counter-reset: listCounter;}
.test ol li{vertical-align:middle;  padding:10px 20px; border-bottom:#d4d4d4 solid 1px; border-top:#fff solid 1px; counter-increment: listCounter;}
.testol li:before {  content: counter(listCounter) " "; width:30px; margin-right:15px;    display: inline-block;    text-align: right;   }
.test ol li span{vertical-align:middle; display:block; color:#008fcd; font:normal 18px 'SegoeWPLight', Verdana, Geneva, sans-serif;}
.test ol li p{vertical-align:middle; display:block; margin:0; padding:0; font:normal 14px 'SegoeWPLight', Verdana, Geneva, sans-serif; color:#797979;}
.test ol li img{vertical-align:middle; padding-left:10px }
.test ol li div{ display:inline-block; margin-left:25px; vertical-align:middle; }
.test ol a{ text-decoration:none; font:normal 30px 'SegoeWPLight', Verdana, Geneva, sans-serif; color:#afafaf;}
.test ol a:hover li{ background-color:#f4f4f4}
.test ol a.mus_active li{ background-color:#f4f4f4}
.icons{display:inline-block; float:right; vertical-align:middle; width:auto;  margin-top:20px}
.play{background:url(http://www.timeshighereducation.co.uk/magazine/graphics/search_icon_big.gif) no-repeat left; width:25px; height:25px; background-size:15px; display:inline-block !important;  }
.suffle{background:url(../images/suffle.png) no-repeat left;  width:25px; height:25px; display:inline-block !important}
.dividr{background:url(http://www.timeshighereducation.co.uk/magazine/graphics/search_icon_big.gif) no-repeat left; width:3px; height:28px; display:inline-block !important;  margin:0 8px 10px 0}

↪ View this code at JSFiddle

score 1 · Accepted Answer · answered Sep 28 '12 at 10:06

try this one http://jsfiddle.net/bFVGr/2/

.test ol li { vertical-align:middle;  border-bottom:#d4d4d4 solid 1px; border-top:#fff solid 1px; counter-increment: listCounter; }

.test ol li > a{display:block; padding:10px 20px;}

.test ol li > a:hover { background-color:#f4f4f4 }

sandeep · Answer 2 · 2012-09-28T09:11:46.977

0

It is wrong to put LI inside anchor tag. Write like this:

<ol>
 <li><a></a></li>
 <li><a></a></li>
</ol>

In FF & chrome your code render like this:

<ol>
<a href="#"><li><div><span>test 1</span><p>Mvdshe</p></div></li></a>
<a href="#"></a><li><a href="#"><div><span>test 12</span><p>sdgmksgb</p></div>
</a><div class="icons"><a href="#"></a><a class="play" href="#"></a><span class="dividr"></span><a class="suffle" href="#"></a></div></li>
<a href="#"><li><div><span>test 11</span><p>Name dgdg</p></div></li></a>

</ol>

edited Sep 28 '12 at 09:11

answered Sep 28 '12 at 08:59

sandeep

91,313
23
137
155

I need a tag to be outside only. I know it is not valid but there is no problm with validation. I need to get that effect as it is in my code – Sowmya Sep 28 '12 at 09:01
You should follow the advice of @sandeep ... you should be able to achieve the result you want using valid, semantic markup. Your always going to run into these kinds of CSS issues if your markup is this broken. – Josh Oct 06 '12 at 01:24

score 0 · Answer 3 · edited May 23 '17 at 12:12

Provided you don't wanna change your list structure as suggested by others one silly thing you could do is put the second list inside a div and apply the same effect ;)

<div id = "special">
<a href="#">
 <li>
    <div>
        <span>test 12</span><p>sdgmksgb</p>
    </div>

    <div class="icons">
        <a href="#" class="play"></a><span class="dividr"></span>
        <a href="#"class="suffle"></a>
    </div>
 </li>
</a>
</div>

and

 .test #special:hover{background-color:#f4f4f4}

see the fiddlecode here

Edit
To make the entire div clickable which I think is what you want, you can do

  .test #special a{display:block}

or see this

But I need the outer a tag to cover entire li so the entire li should be clickable — Sowmya, Sep 28 '12 at 09:23

hover effect for li list

3 Answers3

Linked