兼容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学堂(h5course-com)

原文发表时间:2016-01-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏杨逸轩 ' sBlog

利用CSS 给表单必选项添加星号

1347
来自专栏coding

双向数据绑定

1207
来自专栏漫漫全栈路

ASP.NET MVC学习笔记02控制器和路由

上一篇大致说了下ASP.NET MVC到底是什么,以及MVC的思想,下面我们就继续依照官方文档,从MVC的C开始入手,也就是控制器。 ---- MVC的官方解...

2444
来自专栏林德熙的博客

win10 uwp 横向 AppBarButton

一般看到的 AppBarButton 都是图片在上面,文字在下面,是否可以更改让文字在和图片相同的位置?本文告诉大家如何做出横向的 AppBarButton 把...

241
来自专栏州的先生

Python GUI教程(九):从UI文件中解耦Python代码

1325
来自专栏Django中文社区

Markdown 自动生成文章目录

我们的之前在博客中使用了 Markdown 来为文章提供排版支持。Markdown 在渲染内容的同时还可以自动提取整个内容的目录结构,现在我们来使用 Markd...

3106
来自专栏跟着阿笨一起玩NET

winfrom向窗体中拖放图片并显示

首先要设置窗体的AllowDrop属性为true。然后在窗体的DragEnter事件中添加如下代码:调用自定义的显示图片的方法。

201
来自专栏张善友的专栏

使用System.Net.Mail通过gmail发送电子邮件

gmail的smtp采用了ssl连接:      Outgoing Mail (SMTP) Server - requires TLS: smtp.gmail....

2336
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:自定义 C1WijMenu

C1Wijmo 全部的控件是完全可定制的,并且可以根据你自己的需求定制他们的界面外观。 我准备使用C1Menu演示这一点。 让我们从向控件应用自定义主题开始。 ...

1595
来自专栏挖坑填坑

Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)

安装后还需要引用weui 样式以及我们的font-awesome图标苦,在我们项目index.html中引用

722

扫描关注云+社区