Div style change on hover?

Question

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();
        }
    );
});

Answer 1

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.

Answer 2

.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.

Answer 3

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

Answer 4

我会使用CSS的：hover工具，然后为IE考虑少量的javascript。

Answer 5

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;
}

Answer 6

也做了一个简单的动画，检查这个Fiddle ，我使用了jQuery的Animate()函数