css:将鼠标悬停在 li 标签中的跨度上

标签 css

我的代码有什么问题？为什么当我将鼠标悬停在标签上时，不更改标签中的背景。

<style type="text/css">
#menu ul{
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px;
    height: 33px;
}
#menu li{
    display: inline;
    margin-left: 5px;
    height: 33px;
}
#menu a{
    color: #336699;
    height: 33px;   
}
#menu a:hover{
    color: #FFFFFF;
    height: 33px;
    background:url(images/mid.gif);
}
#menu li .right{
    width: 20px;
}
#menu li .right:hover{
    width: 20px;
    background:url(images/right.png) no-repeat;
    background-position: left top;
}
</style>
<body>
<div id="menu">
    <ul>
        <li><a href = "">One<span class="right"></span></a></li>
        <li><a href = "">Two<span class="right"></span></a></li>
        <li><a href = "">Three<span class="right"></span></a></li>
        <li><a href = "">Four<span class="right"></span></a></li>
    </ul>
</div>

最佳答案

如果你问的是跨度，它们是内联元素，所以你不能给宽度..

您需要使用 block 元素(如 div 标签)，或者使用 display:block 或 显示:内联 block 。

要了解更多信息，请查看 W3C Visual Formatting Model , 也可以看看 http://www.quirksmode.org/css/display.html#t03

您还应该在 span 中添加一个以便它们也获得高度..

这是一个活生生的例子 http://jsfiddle.net/YuJPg/

关于css:将鼠标悬停在 li 标签中的跨度上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4165856/