兼容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;失效。