HTML5学堂:虽然IE6现在使用率越来越低,很多网站也放弃了对IE6,甚至放弃了对IE7的兼容,但是IE6还是有很多人在使用。当我们在处理a标签的hover效果的时候,会出现一些兼容问题,那我们来看一下面这个效果。
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>测试1</title>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
ul{
margin: 20px auto;
width: 350px;
height: 270px;
background: #fcc;
}
h3{
display: inline;
}
a{
float: left;
width: 350px;
height: 35px;
margin-bottom: 5px;
background: red;
}
a:hover{
background: yellow;
zoom:1;
height:60px;
}
a:hover b,a:hover h3,a:hover span{
display: none;
}
</style>
</head>
<body>
<ul>
<li><a href=""><h3>尹小芃槑</h3><span>世说新语</span></a></li>
<li><a href=""><h3>尹小芃槑</h3><span>世说新语</span></a></li>
<li><a href=""><h3>尹小芃槑</h3><span>世说新语</span></a></li>
<li><a href=""><h3>尹小芃槑</h3><span>世说新语</span></a></li>
<li><a href=""><h3>尹小芃槑</h3><span>世说新语</span></a></li>
<li><a href=""><h3>尹小芃槑</h3><span>世说新语</span></a></li>
</ul>
</body>
</html>
原效果
鼠标放上去的效果
a{float: left}将a标签转化成块元素,这样可以设置宽和高。
a:hover b{}当鼠标放在a标签上时,只是将a标签的b的内容隐藏掉,而不是将a隐藏掉。如果将a标签隐藏掉的,hover效果将消失,使display:none;失效。