4

所以我有这个代码的导航

<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 any a with class 时，我希望我的#arrow 移动。

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

4

2 回答 2

6

单独使用 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/

于 2012-05-21T01:04:22.533 回答
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 */ }

（注意此代码未经测试）

于 2012-05-21T01:16:02.317 回答