兼容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为例说明:

1192
来自专栏yl 成长笔记

ps 替换背景以及调整尺寸

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

883
来自专栏web前端教室

html5 - canvas 简介

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

2028
来自专栏黑泽君的专栏

jsp中的警告:Attribute (cellpadding) is obsolete. Its use is discouraged in HTML5 documents.

Attribute (width) is obsolete. Its use is discouraged in HTML5 documents. 属性(宽度)...

1323
来自专栏非典型技术宅

iOS屏幕适配概述1 屏幕适配简介2 Autoresizing3 Auto Layout

1543
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,...

21010
来自专栏河湾欢儿的专栏

常见选择器

Id选择器(同一页面不能重名)# 类选择器 . 标签选择器 p 包含选择器 .box p 群组选择器 , 通配符 *

792
来自专栏Material Design组件

Material Design — 底部导航(Bottom Navigation)

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

你不知道的height常识

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

933
来自专栏十月梦想

Vue动画之多个元素或组件的动画效果

        前面我们看的是单个元素的过渡效果,我们看一下多个元素或者组件的过渡

2622

扫码关注云+社区