使用Jquery保持一个div的不透明度，降低悬停时其余部分的不透明度

我有点纠结于这个问题。以下是我的设置的基本概述：

<div id="shell">
  <div class="subelement">One</div>
  <div class="subelement">One</div>
  <div class="subelement">One</div>
  <div class="subelement">One</div>
</div>

我希望在.subelement的悬停位置上，使用subelement类来降低剩余div的不透明度。我知道如何在jQuery中使用悬停效果，只是不知道从哪里开始制作没有悬停的剩余div的动画。感谢任何人的建议。

更新：最终解决方案-http://jsfiddle.net/yqPFH/

我会用CSS代替

演示

动画演示

HTML

<div id="shell">
  <div class="subelement">One</div>
  <div class="subelement">One</div>
  <div class="subelement">One</div>
  <div class="subelement">One</div>
</div>

CSS

#shell:hover {
    color: rgba(0,0,0,.5);
}
.subelement:hover {
    color: rgba(0,0,0,1);
}

虽然这个问题已经有了答案，但提供了一个我调整过的额外答案，并已被删除。在这里，它使用的是jQuery，当什么都没有悬停时就会失去悬停状态。容易的

http://jsfiddle.net/kKHt4/3/

$(".subelement").hover( function() {
    $(this).siblings().stop().fadeTo("fast", 0.5);
}, function() {
    $(this).siblings().stop().fadeTo("fast", 1.0);
});

$("#shell .subelement").hover(function() {
    $(this).css("opacity", 1).siblings().css("opacity", 0.6);
});

http://jsfiddle.net/EV833/1

两部分问题：

1( 如何只保留第一行不透明度：1，其余为.52( 一旦选择或悬停，如何保持不透明度：1，直到悬停/选择另一行？

相关内容

最新更新

热门标签：