li:hover与a:hover的区别

<style>

ul.two

{

display:none;

}

li#one:hover

{

display:block

}

</style>

<li id="one">

<a id=“a1”>链接</a>

     <ul class="two">

       <li><a>链接1-1</a></li>

       <li><a>链接1-2</a></li>

    </ul>

</li>

如果用a#a1:hover来控制列表的颜色，

那么当光标移动到ul.two时，就会失效，因为光标离开了a#a1,a#a1:hover不在成立

如果用li#one:hover来控制列表的颜色，

那么当光标移动到ul.two时，不会失效，因为ul.two包含在li#one中，所以此时li#one:hover仍然成立。