当两个图像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}); 

});