當兩個圖像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}); 

});