Question

I have the following code:

var shadow = "#FF00FF 0 50px 90px inset";

$('#element').find('a.thumbnail').hover(function() {
     $(this).css({ '-webkit-box-shadow': shadow, '-moz-box-shadow': shadow, '-khtml-box-shadow': shadow, 'box-shadow': shadow});
},
function(){
     $(this).css({'background-color': 'transparent', '-webkit-box-shadow': 'none', '-moz-box-shadow': 'none', '-khtml-box-shadow': 'none', 'box-shadow': 'none'});
});

But the problem is that the box-shadow is applied to the entire group of .thumbnails .. So the first thumbnail div has a darker color than the last thumbnail div (box shadow)..

Whilst what I am trying to achieve is the shadow effect applied only to the hovered thumbnail.

What am I doing wrong?

Edit: markup looks like this:

<div id="element">

<a class="thumbnail" href="xxx">
    <img src="" />
    <span>Title</span>
    <div class="thumbnail_description">Description</div>
</a>

*** Repeat ***

</div>

.thumbnail is display:block

Thanks,
Wesley

Answer 1

your code should work.
Here is a live example of your own code and you can see that it works.
Maybe you had an error somewhere else in the page or something like that.