Html li列表的悬停效果
我有一个添加了颜色的Html li列表的悬停效果,html,css,hover,html-lists,Html,Css,Hover,Html Lists,我有一个添加了颜色的列表。这很好用。但是当我添加一个div时,它有两个标签,悬停效果不适用 在我的代码中,第二次没有出现悬停 HTML: <div class="test"> <ol> <a href="#"><li><div><span>test 1</span><p>Mvdshe</p></div></li></a> <a
列表。这很好用。但是当我添加一个div时,它有两个标签,悬停效果不适用
在我的代码中,第二次
没有出现悬停
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>
.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}
↪ 将LI放在锚定标记中是错误的。这样写:
<ol>
<li><a></a></li>
<li><a></a></li>
</ol>
如果您不想像其他人建议的那样更改列表结构,您可以做的一件愚蠢的事情是将第二个列表放在div中,并应用相同的效果;)
编辑要使整个div可点击,我认为这是您想要的,您可以这样做
.test #special a{display:block}
或者请参见试试这个
我只需要一个标签在外面。我知道它是无效的,但是验证没有问题。我需要得到这种效果,因为它是在我的代码你应该遵循@sandeep的建议。。。您应该能够使用有效的语义标记实现您想要的结果。如果你的标记被破坏了,你总是会遇到这种CSS问题。但是我需要外部的a标签覆盖整个li,这样整个li都可以点击
<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>
.test #special:hover{background-color:#f4f4f4}
.test #special a{display:block}
.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 }