HTML5学堂-码匠 HTML5学堂

您当前位于:历史兼容问题 ——> 如何实现兼容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>

兼容IE6a标签hover特殊效果 原效果

原效果

兼容IE6a标签hover特殊效果 鼠标hover效果

鼠标放上去的效果

a{float: left}将a标签转化成块元素,这样可以设置宽和高。

a:hover b{}当鼠标放在a标签上时,只是将a标签的b的内容隐藏掉,而不是将a隐藏掉。如果将a标签隐藏掉的,hover效果将消失,使display:none;失效。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端