Question

In the eg below you can see that when I’m hovering the image the black box bounce.

I want to be able to hover only the Black box.
I can’t understand what I’m missing.

Also, I want to add some CSS3 on the black box when is on top hovered. to do this I’m adding a class .focus but seems to not working.
Any suggestion?
Ta,

http://jsfiddle.net/Q6Czh/19/

Answer 1

You are binding the hover event on the <li> element, not only on the <a> (the black box), so it is triggered when you hover any element within the list element.

Change you code to this:

// bind hover on the anchor element
$("#nav-shadow li a").hover(function() {
    var e = this;
    // remove the .find('a') as 'e' is the anchor
    $(e).stop().animate({
        ...
    }, 250, function() {
        ...
    });
    // use .sibling() instead of .find('img')
    $(e).siblings("img.width320").stop().animate({
        ...
    }, 250);
}, function() {
        ...
});​

DEMO

For the second part, I have no clue what you’re trying to explain… :-/