Question

我有相应图片的菜单链接。我正在尝试将文本链接连接到图像，因此当文本链接或图像翻转时，其他文本和图像变暗但不是主要。谢谢你的帮助。

我有一个部分演示代码：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>

Answer 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/

jQuery，翻转文本或图像链接，暗淡文本和链接图像

1 个答案: