Доступ к первому изображению при наведении курсора мыши на второе изображение из двух изображений

Question

У меня есть div, содержащий два изображения, которые обернуты событием при наведении. Эти изображения являются стрелками влево и вправо. При наведении курсора на стрелку вправо, мне нужно изменить непрозрачность на стрелке влево. HTML-код:

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

код запроса

$('.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});

});