jquery .class hover function.. 将样式应用于单个元素，而不是组

Question

我有以下代码:

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

但问题是 box-shadow 应用于整组 .thumbnails .. 所以第一个 thumbnail div 的颜色比最后一个 thumbnail div(box shadow)的颜色深..

虽然我想要实现的是仅应用于悬停缩略图的阴影效果。

我做错了什么？

编辑:标记如下所示:

<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

谢谢，卫斯理

Answer 1

你为什么还要使用 javascript？您只是在 <a> 中添加阴影悬停在右边的标签

在你的 CSS 文件中:

a.thumbnail:hover {
    -webkit-box-shadow: #FF00FF 0 50px 90px inset;
    -moz-box-shadow: #FF00FF 0 50px 90px inset;
    .... etc
}

编辑，这是从您的示例中执行此操作的 jQuery 方法，仅供引用，这很疯狂。

$('a.thumbnail', '#element').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'});
});