兼容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 条评论
登录 后参与评论

相关文章

来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2 HTML5基础入门

网页就是HTML?这么理解大致准确。通常网页中包含了文字,图片、视频、小游戏,动画效果等等内容。我们以本章开头的html为例说明:

1142
来自专栏大数据钻研

认识html元素

前端现在越来越火,可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础,但是想转到前端的人”一点帮助。 认识一个html文档的基...

2544
来自专栏HTML5学堂

Form表单 问题多多(中)

HTML5学堂 - 刘国利:在上一篇的博文当中,主要讲解了表单的嵌套规则与书写习惯。在本篇博文当中,我主要就具体的样式实现进行一下讲解,并提一下表单相关的浏览器...

2815
来自专栏web前端教室

html5 - canvas 简介

什么是Canvas? 1、canvas 元素是html5的核心功能之一,使用 JavaScript 在网页上绘制图像。 2、画布是一个矩形区域,您可以控制其每...

1818
来自专栏阮一峰的网络日志

自适应网页设计(Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈...

9096
来自专栏Material Design组件

Material Design — 底部导航(Bottom Navigation)

3789
来自专栏编程之旅

CSS——实现元素的垂直居中

在写CSS的过程中,我常常谷歌一个东西,就是如何实现元素的垂直居中,水平居中难度还不是很大,但是垂直居中我这个烂记性是写一次忘一次,于是本着好记性不如烂笔头的想...

953
来自专栏达摩兵的技术空间

你不知道的height常识

本文将总结一些height中你不知道的常识内容,希望能给你的前端编码带来一些不一样的思想以及更好的理解前端盒模型。

803
来自专栏yl 成长笔记

ps 替换背景以及调整尺寸

领导吩咐我修改她的图片背景,尺寸, 屁颠屁颠去弄,半小时后发现大学里学的 ps 忘差不多了,这里总结一下修改图片背景以及尺寸的基本操作。

773
来自专栏州的先生

Python GUI教程(六):使用Qt设计师进行窗口布局

2035

扫码关注云+社区