CSS:悬停在div之外

Question

所以我使用此代码导航

<ul>
    <li><a href="#" class="home">Home</a></li>
    <li><a href="#" class="about">About</a></li>
    <li><a href="#" class="portfolio">Portfolio</a></li>
    <li><a href="#" class="photos">Photos</a></li>
    <li><a href="#" class="contact">Contact</a></li>
</ul>
<div id="arrow">

</div>

每当我:在课堂上悬停任何一个,我希望我的#arrow移动.

有没有办法做到这一点？先感谢您.:)

Answer 1

单独使用CSS是不可能的.您需要一些动态脚本才能实现这一目标.使用时:hover,您可以操纵正在悬停的元素及其子/孙子元素的属性.#arrow但是,并没有嵌套在任何列表项中,因此它们的:hover状态不能指示箭头元素的样式 - 至少不是直接.

如上所述,您可以通过一些动态脚本来实现此目的.例如,以下jQuery将完成您之后的效果:

$("ul").on("mouseenter mouseleave", "li", function(e){
   e.type === "mouseenter"
       ? $("#arrow").stop().animate({ 
           left:    $(this).offset().left, 
           width:   $(this).outerWidth(),
           opacity: 1           
       }, 500 )
       : $("#arrow").stop().animate({ 
           left:    0, 
           width:   $("ul li:first").outerWidth(),
           opacity: 0
       }, 750 );       
});?

小提琴:http://jsfiddle.net/ZvqPZ/2/