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 するたびに、 #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 に答える