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/

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 */ }

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

CSS：悬停在div之外

2 个答案: