Question

我对这个问题感到困惑。以下是我的设置的基本概要：

<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悬停时，减少剩余div与子元素类的不透明度。我知道如何使用jQuery悬停效果，只是不知道从哪里开始动画其余没有悬停的div。感谢任何建议。

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

Answer 1

我会用CSS代替

Demo

Demo With Animations

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

Answer 2

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

http://jsfiddle.net/EV833/1

Answer 3

虽然这个问题已经有了答案，但我提供了一个额外的答案，我已经调整并且已被删除。这里使用的是jQuery，当没有任何东西悬停时会丢失悬停状态。容易。

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

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

Answer 4

由两部分组成的问题：

1）你如何只保留第一行的不透明度：1并在.5处休息 2）一旦被选中或悬停，你如何保持不透明度：1，UNTIL你悬停/选择另一条线？

使用Jquery保持一个div的不透明度，减少悬停时的休息不透明度

4 个答案: