CODEWITHSUNDEEP
jqueryhoveropacity
Evan
Evan

Reputation: 85

Jquery Hover Opacity, what am I missing here?

I'm a little (more like a very) rusty on my jquery knowledge. for some reason I can't figure out what I am missing here to make the blue box fade when the green box is being hovered over.

the script:

 $(document).ready(function() {
    $(".hover-text").hover({
    $(".hover-hide").animate({
        opacity: 0.4,
    }, 500);
    });​

the html:

 <div class="hover-hide">
    <div class="hover-text">
        BLAH
    </div>
    </div>

the css:

 .hover-hide{
    width:200px;
    height:200px;
    background-color:blue;
    padding:30px;
    }
    .hover-text{
    color:white;
    background-color:green;
    padding:10px;
    width:auto;
    margin-top:20px;
    }​​

Thanks so much! :)

Upvotes: 3

Views: 143

Answers (2)

sbeliv01
sbeliv01

Reputation: 11810

You're missing the function after the .hover call. Also, you're missing a closing bracket and parenthesis at the end of your .ready();

Should be:

$(document).ready(function() {     

    $(".hover-text").hover( function() {     
        $(".hover-hide").animate({ opacity: 0.4, }, 500);     
    });

});

Here's a fiddle: http://jsfiddle.net/TMZhJ/

Upvotes: 1

Snuffleupagus
Snuffleupagus

Reputation: 6715

The first argument of .hover is a callback function, it should be $('.hover-text').hover(function(){. Fiddle here.

Upvotes: 5

Related Questions