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

但问题是盒子阴影应用于整个.thumbnails组。所以第一个缩略图div的颜色比最后一个缩略图div（盒子阴影）更暗。

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

我做错了什么？

编辑：标记如下所示：

<div id="element">

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

*** Repeat ***

</div>

.thumbnail是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方式，其中FYI是疯狂的。

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

Answer 2

你的代码应该有用 Here is a live example您自己的代码，您可以看到它有效也许你在页面的其他地方或类似的地方有错误。

jquery .class悬停函数..将样式应用于单个元素，而不是组

2 个答案: