当悬停或单击双图像 div 的第二个图像时访问第一个图像

Question

我有一个包含两个图像的 div，其中包含悬停事件。这些图像是左箭头和右箭头。当我将鼠标悬停在右箭头上时，我需要更改左箭头的不透明度。 html 代码是：

<div class="arrows">
   <img src="left-arrow.jpg"  id="left" />
   <img src="right-arrow.jpg" id="right" />
</div>

jquery 代码

$('.arrows img').hover(function() {
    var imgId = $(this).attr('id');
    if (imgId == "right") {
        // change opacity on left arrow
        $(this).parent().img.eq(0).css({"opacity" : .5});  // does not work
        $('arrows img.eq(0)').css({"opacity" : .5});       // does not work
    }
});

我可以尝试的任何建议。

Answer 1

试试这个：

$('.arrows img').hover(function() {

    $(this).siblings().css({"opacity" : .5});

});

编辑：

如果您希望根据第一页或最后一页将左箭头或右箭头变灰，请执行以下操作：

悬停时：

  $('.arrows img').hover(function() {

    $(this).css({"opacity" : .5});

});

单击时：

  $('.arrows img').click(function() {

    $(this).css({"opacity" : .5});

});