您当前位于：
项目兼容问题 ——> 如何实现兼容IE6的a标签鼠标移入效果（hover效果）
如何实现兼容IE6的a标签鼠标移入效果（hover效果）
2015/05/07 00:08:15
|
作者：HTML5学堂（码匠）
|
分类：项目兼容问题
|
关键词：兼容,IE6,a标签,hover
兼容IE6 a标签hover特殊效果
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;失效。
欢迎沟通交流~HTML5学堂
阅读：661
极客编程技术分享
