0

私はこれで少し立ち往生しています。これが私のセットアップの基本的な概要です。

<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/

4

4 に答える 4

4

代わりに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);
}
于 2013-01-01T19:32:21.643 に答える
1 
$("#shell .subelement").hover(function() {
    $(this).css("opacity", 1).siblings().css("opacity", 0.6);
});

http://jsfiddle.net/EV833/1

于 2013-01-01T19:31:52.640 に答える
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);
});​​​​​
于 2013-01-01T19:58:22.497 に答える