css: hover on the span in li tag
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 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;
加载中,请稍侯......
精彩评论