开发者

css: hover on the span in li tag

开发者 https://www.devze.com 2023-01-25 07:24 出处:网络
what is wrong with my code? why when i hover ontag, don\'t change background intag. <style type=\"text/css\">

what is wrong with my code? why when i hover on tag, don't change background in tag.

<style type="text/css">
#menu ul{
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px;
    height: 33px;
}
#menu li{
    d开发者_开发问答isplay: 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>


if you are asking about the spans, they are inline elements so you cannot give the a width..

you need to use block elements (like the div tag) , or change the spans to become block with display:block or display:inline-block.

For more reading have a look at W3C Visual Formatting Model, and also have a look at http://www.quirksmode.org/css/display.html#t03


You should also add an &nbsp; inside the spans so they get a height as well..

here is a live example http://jsfiddle.net/YuJPg/


Change class .right to include display: block;

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号