a:hover 伪类

  a:hover伪类是修饰超链接的效果，但是在ie6下不出现结果。代码如下：

html代码：

<ul>
  <li>
   <a href="#">
    <img src="image/1.jpg"/>
    <span>聂海丽</span>
    <span class="special">计算机信息管理</span>
    <span>月薪:5000</span>
    <span class="special">中原工学院软件学院</span>
   </a>
  </li>
  <li>
   <a href="#">
    <img src="image/1.jpg" alt=""/>
    <span>聂海丽</span>
    <span class="special">计算机信息管理</span>
    <span>月薪:5000</span>
    <span class="special">中原工学院软件学院</span>
   </a>
  </li>
  <li>
   <a href="#">
    <img src="image/1.jpg"/>
    <span>聂海丽</span>
    <span class="special">计算机信息管理</span>
    <span>月薪:5000</span>
    <span class="special">中原工学院软件学院</span>
   </a>
  </li>
  <li>
   <a href="#">
    <img src="image/1.jpg"/>
    <span>聂海丽</span>
    <span class="special">计算机信息管理</span>
    <span>月薪:5000</span>
    <span class="special">中原工学院软件学院</span>
   </a>
  </li>
 </ul>

css代码：

body, div, ul, li {margin:0;padding:0px;}
ul {width:255px;margin:0 auto;padding:0;border:1px red solid;padding:10px 0px;}
li {list-style-type:none;border:1px red solid;/*border-collapse:collapse;*/}
img {border:0;width:30px;height:30px;padding:5px 10px 0px;}
span {font-size:14px;padding-right:20px;padding-left:0;color:red;font-weight:bold;}
.special {color:black;font-weight:normal;}
a {text-decoration:none;display:block;}
a img {display:none;}
a .special {display:none;}
a:hover img {display:inline;}
a:hover .special {display:inline;}
a:hover{line-height:14px;}

显示效果是，当鼠标不悬停时是一个效果：

 

 

        当鼠标悬停时在一行时会自动展开，但是ie6不会展开。因此，我们就在网上搜答案，网上说加一句a:hover{display:inline-block;}就可以。的确，加上这句话，在ie6下可以了，谷歌和苹果又不愿意了。后来发现，加上a:hover{加一个已经定义的值（如：line-height:height;）;}，每一个浏览器都可以实现效果。 因此，是不是真理，必须做了才知道，网上的东西也需要验证的。

       希望这篇文章对大家有帮助。