CSS语法,如何使用li.class :hover?

标签 css css-selectors

我想将一个类应用于 li 元素,但是当悬停事件发生时 ^^

没有这个代码的类我没问题:

#leaderboard li:hover {
    z-index:1000;
    -webkit-transform: scale(3.2);
    -moz-transform: scale(3.2);
    -ms-transform: scale(3.2);
    -o-transform: scale(3.2);
    transform: scale(3.2);    
}

但是当我那样尝试时,没问题:

#leaderboard li.0:hover {
    z-index:1000;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);    
}

HTML 在这里:

<ul id="leaderboard" name="leaderboard">
<li class="0" style="left: 0px;"><h1 style="display:inline" id="user-234">4900</h1> <img style="height:50px" src="serveurtopmc.jpg"> xxx</li>
<li class="1" style="left: 440px;"><h1 style="display:inline" id="user-836">4090</h1> <img style="height:50px" src="banniere_1000x240.jpg"> xxx</li>
<li class="2" style="left: 770px;"><h1 style="display:inline" id="user-590">3488</h1> <img style="height:50px" src="9.gif"> xxx</li>
<li class="3" style="left: 770px;"><h1 style="display:inline" id="user-1">2556</h1> <img style="height:50px" src="coeur.png"> xxx</li>
<li class="4" style="left: 880px;"><h1 style="display:inline" id="user-546">2542</h1> <img style="height:50px" src="1372878266-photo15.jpg"> xxx</li>
<li class="5" style="left: 440px;"><h1 style="display:inline" id="user-597">2536</h1> <img style="height:50px" src="logo.png"></li></ul>

有人有正确的语法吗? :)

==========

我做到了,刚刚完成测试(它有点长,因为数字是由 jscript 生成的)这很完美 => #leaderboard li.rank0:hover { 谢谢 mcabrams :)

最佳答案

如果类需要保留数字,您可以转义 0 的 Unicode 代码点:fiddle

#leaderboard li.\30:hover {
    color: coral;
}

关于CSS语法,如何使用li.class :hover?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22025041/

相关文章:

jquery - 有没有类似:eq() in jQuery?的标准CSS选择器

html - 自动高度父 div 中的百分比高度?

CSS "nested"If - 将属性添加到不同的类

html - 删除 html 空格,使用 css

php - 如何删除父主题生成的样式?

html - CSS :last-child selector being ignored by last child

css - 模仿兄弟元素对另一个兄弟元素的影响的问题

html - 焦点时创建下拉菜单

css - 将 div 中的字形居中