jQuery/JavaScript Function to Change Style Opacity

Question

How do I write a function that, onmouseover;

• Gets all the 'img' tags in this div
• Changes style of the image(s) to lower the opacity to 0.5

Thanks in advance!

Answer 1

$('.whatever').on('mouseenter', function() {
    $('img', this).css('opacity', '0.5');
}).on('mouseleave', function() {
    $('img', this).css('opacity', '1');
});

However, you can do the same thing using using pure CSS:

.whatever:hover img { opacity: 0.5; }

Answer 2

Here is a possibility:

$("#yourDiv").bind("mouseover", function(){
    $(this).find("img").css("opacity", "0.5");
});