CSS :hover在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任何一个class为a的元素，我都希望我的#arrow移动。 有没有一种方法可以做到这一点？ 预先感谢您。 :)

- Juvar Abrera

---

你说的“移动”是什么意思？摇晃？还是移动到正在悬停的<li>元素上？ - Sp4cecat

你不能同时对 #arrow 进行 :hover 和 id 定义。 - Smandoli

水平的？垂直的？我看你知道jQuery，所以你可以重新表达你的问题，因为正如@Johnathan所说，你可以用JavaScript来实现它。 - Roko C. Buljan

@Sp4cecat - 当我悬停在锚点上时，id为#arrow的元素会水平移动。 - Juvar Abrera

我们可以展示给你一个jQuery的方法，但那并不适合你的问题。所以我认为你可以创建一个新的。 - Roko C. Buljan

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/

- Sampson

Answer 2

正如已经提到的那样，你不能使用CSS来实现这个。你可以使用jQuery，例如：使用CSS类来指定位置，并在悬停时在类之间切换，使用jQuery。

jQuery：

$("li a").hover(    
  function () {    /* on hover over*/
    $("#arrow").addClass("moved-pos");
  },
  function () {    /* on hover out*/
    $("#arrow").removeClass("moved-pos");
  }
});

CSS:

#arrow{ /*set original position for arrow */ }
#arrow.moved-pos{ /*set new position here */ }

（注意：此代码未经测试）

- FluffyKitten