Change opacity on hover jQuery

Question

I have been trying to make it so that when you hover over any part in the box then the box-hover (div) will fadein to opacity 0.7 so that it looks mostly black but little transparent. But nothing I have done is working. And I don't want to assign it with ID since there will be more boxes.

Here is the code I am trying to make: http://pastebin.com/3ZRcrx57

Thanks

Answer 1

First of all, your .box-hover element is a child, not a sibling, so next() will not work, you will have to use find() or children().

Secondly, when writing javascript case does matter, and its fadeIn and fadeOut (notice capital letters)

I think this is what you're trying to do:

$(".box").hover(function () {
    $(this).find('.box-hover').fadeIn(100);
},
function () {
    $(this).find('.box-hover').fadeOut(100);
});​

Here's a DEMONSTRATION

You could even shorten that down to:

$(".box").on('mouseenter mouseleave', function () {
    $(this).find('.box-hover').fadeToggle(100);
});​

DEMO