对于:hover的理解

2018-01-09T16:31:14
<ul>
   <li class="length">
       <h3><a href="">100px 100px</a></h3>
       <div></div>
   </li> 
   <li class="percent">
       <h3><a href="">50% 50%</a></h3>
       <div></div>
   </li> 
   <li class="cover">
       <h3><a href="">cover</a></h3>
       <div></div>
   </li> 
   <li class="contain">
       <h3><a href="">contain</a></h3>
       <div></div>
   </li> 
</ul>

上面是html部分

.percent a:hover div{
    display:block;
    background-size:50% 50%;
}

上面的CSS为什么没有效果呢?

.percent:hover div{
   display:block;
   background-size:50% 50%;
}

而这样就有效果了?

这里我们要注意:.percent a:hover div 表示.percent 下的 a:hover鼠标经过 a 时,a下面的div显示出来,根据html代码在a 下没有div,所以没有效果 。而.percent:hover div 鼠标经过 class为percent的元素时,它下面的 div 显示,根据html代码 其下有div 所以显示出来了。

当我们发现CSS没有效果时,要注意控制的范围以及html代码的结构

 

/** THE END*/

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。