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

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

Answer 2

Just animate it's opacity, by default set it to 0.

$(".box").hover(function () {
   $(this).animate({'opacity':'0.7'}, 100);
},
function (){
   $(this).animate({'opacity':'0'}, 100);
});​

Answer 3

How about using a CSS only solution?

.box-hover {
    background-color: black;
    position: absolute;
    width: 290px;
    height: 185px;
    margin: 5px 5px 0 5px;
    display: none;
    opacity: 0;


    -webkit-transition: opacity 0.1s; /* Safari and Chrome */
       -moz-transition: opacity 0.1s; /* Firefox 4 */
        -ms-transition: opacity 0.1s; /* MSIE */
         -o-transition: opacity 0.1s; /* Opera */
            transition: opacity 0.1s;
}

.box:hover .box-hover {
    display: block;
    opacity: 0.7;
}