CODEWITHSUNDEEP
jquerycssjquery-animate
Andy
Andy

Reputation: 1432

Div style change on hover?

I've tried the following code to change some css properties (.overthumb) of a DIV (.thumbnail) when the mouse hovers over it. But, it doesn't work!!! Any tips would be good on how to get it working. If possible, for the changes to animate as well.

$(document).ready(function(){
    $(".thumbnail").hover(
        function(){
            $(".overthumb").show();
        },
        function(){
            $(".overthumb").hide();
        }
    );
});

Upvotes: 0

Views: 887

Answers (6)

Brigand
Brigand

Reputation: 86220

You could do all this with CSS.

http://jsfiddle.net/6wQp3/

Here's an updated version. I forgot to set the div to position: relative;. Now the overlay should appear relative to the parent div.

Upvotes: 2

Shyju
Shyju

Reputation: 218722

It works for me

Are you sure that your first element has a class called thumbnail and the second has a class called overthumb

Here is the working sample : http://jsfiddle.net/qBsya/

If you want to change some CSS properties, here is an example (This update the background color)

$(document).ready(function(){
$(".thumbnail").hover(
    function(){
        $(".overthumb").css('background', '#C1A3A5').show();
    },
    function(){
        $(".overthumb").css('background', '#FFF').hide();
    }
);

});

working sample : http://jsfiddle.net/qBsya/4

Upvotes: 1

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9498

Did a simple animation too, check this Fiddle, I have used jQuery’s Animate() Function

Upvotes: 1

Filip Roséen
Filip Roséen

Reputation: 63797

The provided code looks correct, so there's probably something wrong elsewhere.

You can accomplish the same thing using css, and this is also recommended since it's cleaner. If you are not going to execute any other javascript methods on :hover this is the way to go.

.thumbnail:hover .overthumb {
  /* display:block; */
  display:inline;
}

.thumbnail .overthumb {
  display:none;
}

Upvotes: 1

kolin
kolin

Reputation: 2344

i would use the :hover facility of css, and then factor in a small amount of javascript for IE.

Upvotes: 1

peduarte
peduarte

Reputation: 1677

.hide and .show will simply show and hide it.
You need the .css function to change the css. More info here: http://api.jquery.com/css/

Example here: http://jsfiddle.net/peduarte/XsJAK/

By the way, you could do all that with just CSS.

Upvotes: 1

Related Questions