html - CSS :hover outside a 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>

每当我 :hover 任何带有类的 a 时，我都希望我的#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 );       
});​

fiddle :http://jsfiddle.net/ZvqPZ/2/