前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >兼容IE6 a标签hover特殊效果

兼容IE6 a标签hover特殊效果

作者头像
HTML5学堂
发布2018-03-12 17:02:05
8660
发布2018-03-12 17:02:05
举报
文章被收录于专栏:HTML5学堂HTML5学堂

HTML5学堂:虽然IE6现在使用率越来越低,很多网站也放弃了对IE6,甚至放弃了对IE7的兼容,但是IE6还是有很多人在使用。当我们在处理a标签的hover效果的时候,会出现一些兼容问题,那我们来看一下面这个效果。

代码语言:javascript
复制
<!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;失效。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2016-01-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 懂点君 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档