Accessing the first image when the second image of a two image div is hover or clicked

I have a div containing two images which is wrapped with a hover event. These images are left and right arrows. When I hover on the right arrow, I need to change the opacity on the left arrow. The html code is:

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

jquery code

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

Any suggestion that I can try.

Try this:

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

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

});

Edit:

If you are looking to gray out the left or right arrow based on first or last page do this:

On Hover:

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

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

});

On Click:

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

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

});