当悬停或点击两个图像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});

});