Question

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

<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>

Answer 1

如果您询问跨度，它们是内联元素，因此您无法给出宽度..

您需要使用块元素（，如div标记），或使用display:block或display:inline-block更改跨度。

如需更多阅读，请查看W3C Visual Formatting Model，并查看http://www.quirksmode.org/css/display.html#t03

你还应该在跨距内添加 ，这样他们也可以得到一个高度。

这是一个实例http://jsfiddle.net/YuJPg/

Answer 2

更改班级.right以包含display: block;

css：将鼠标悬停在li标签的范围内

2 个答案: