0

対応する画像へのメニューリンクがあります。テキストリンクを画像に接続しようとしているので、テキストリンクまたは画像のいずれかがロールオーバーされると、他のテキストと画像は暗くなりますが、メインは暗くなりません。助けてくれてありがとう。

部分的なデモコードがあります：http：//jsfiddle.net/philoman/d23UE/ テキストまたはimgのいずれかをロールオーバーすると、すべてが暗くなるようです。

$(document).ready(function () {
    $(".together li a").hover(function () {
        $(".together li a").stop().animate({
            opacity: 0.4
        }, 400);
        $(this).stop().animate({
            opacity: 1
        }, 1);
    },

    function () {
        $(".together li a").stop().animate({
            opacity: 1
        }, 400);
    });

});

HTML：

<ul id="buttons" class="together">
    <li>
        <a href="#">Button 1</a>
    </li>
    <li>
        <a href="#">Button 2</a>
    </li>
    <li>
        <a href="#">Button 3</a>
    </li>
</ul>
<ul id="images" class="together">
    <li>
        <a href="#">
            <img src="Button-1-image.jpg" />
        </a>
    </li>
    <li>
        <a href="#">
            <img src="Button-2-image.jpg" />
        </a>
    </li>
    <li>
        <a href="#">
            <img src="Button-3-image.jpg" />
        </a>
    </li>
</ul>
4

1 に答える 1

1

ホバーされた要素のインデックスを取得し、同じインデックスを持たないリスト要素のみをフェードアウトすることで、これを解決しました。

$(document).ready(function () {
  $(".together li a").hover(function () {
    var idx = $(this).closest('li').index();
    $('.together').each(function (i, el) { //restart index counting for each list
      $('li:not(:eq(' + idx + '))', el).stop().animate({opacity: 0.4}, 400);
    });
  },

  function () {
    var idx = $(this).closest('li').index();
    $('.together').each(function (i, el) {
      $('li:not(:eq(' + idx + '))', el).stop().animate({opacity: 1}, 400);
    });
  });
});

http://jsfiddle.net/mblase75/d23UE/2/

于 2013-01-18T21:04:10.387 に答える