1

まず、コードを確認しましょう。

HTML:

<div class="button_container">
    <div class="inner_button">
        <a href="#" class="button_text">Button</a>
    </div>
    <div class="button_side">
        <i class="play" />
    </div>
</div>

CSS:

.inner_button:hover {
    background: red;
}
.button_container:hover > .button_side { 
    background-color: red !important; 
}

上記のコードは、 がホバーされ.button_sideている場合、ホバーを許可します.button_container。しかし、今は逆もやりたいので、.button_sidehovered の場合は hover になります.button_container。CSS では難しいと思いますが、私はそれを好みますが、JQuery で何かを受け入れることができます。これどうやってするの？

4

3 に答える 3

4

「私も逆にしたいので、.button_sideホバリングするとホバリングします.button_container」

CSS は親から子へと機能する傾向があり、その逆ではなく、これに JS を使用する必要があることについては正しいと思います (jQuery を使用すると簡単です)。最初に、目的の設定で追加するクラスを定義します。

.hover {
    background : red;
}

その後：

$(".button_side").mouseenter(function() {
    $(this).closest(".button_container").addClass("hover");
}).mouseleave(function() {
    $(this).closest(".button_container").removeClass("hover");
});

デモ: http://jsfiddle.net/PxQCT/

jQuery イベント ハンドラー内では、this(通常) イベントが適用された要素を参照するため$(this)、ホバーされたアイテムへの jQuery ラッパーを提供し、jQuery のメソッドを使用してクラス.closest()で最も近い祖先を見つけることができます。.button_container

私が示した JS コードは、問題の要素の後に表示されるスクリプト要素、および/またはドキュメント対応ハンドラーに含める必要があることに注意してください。

EDIT / PS：質問に示されているように、マークアップでは、.button_side要素には実際にはホバー可能なコンテンツがなく、空の（自己閉鎖）<i>要素しかないことに注意してください（したがって、私のデモでは、何かを持つことができるようにそこにいくつかのコンテンツを追加しましたカーソルを合わせて動作を確認します)。

于 2013-09-19T13:52:40.610 に答える
1

これはまさにあなたが求めているものではありませんが、おそらく役立つでしょう。

js をいじりたくない場合は、適切な解決策になる場合があります。反対にhtml、cssコードが乱雑になります。特別な状況でこれを使用することはめったにありません (たとえば、行を展開する必要があるため、列の高さを 100% にすることができる列ビューにホバー効果を持たせる場合など)。

古いバージョンの IE では機能しないため、使用する場合は注意が必要です。

HTML

 <div class="button_container">
     <div class="inner_button">
         <a href="#" class="button_text">Button</a>
     </div>
     <div class="button_side">
         <i class="play">play</i>
         <div class="hover-fake"><div>
     </div>
 </div>

CSS

.hover-fake {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: green;
    display: none;
}

.button_container {
    position: relative;
    left: 0xp;
    top: 0px;
}

.inner_button:hover {
    background: red;
}
.button_container:hover > .button_side { 
    background-color: red !important; 
}

.button_side:hover > .hover-fake  {
    display: block;
}

JSFiddle

于 2013-09-19T14:13:17.863 に答える
0

次のようなことができると思います（jQueryを使用）：

$(document).ready(function(){

    $('.button_side').hover(function(){
        $('.button_container').addClass('hover');        
    }, function(){
        $('.button_container').removeClass('hover');
    });

});

ヘルプが必要な場合は、このjsfiddleを参照してください。

于 2013-09-19T13:57:30.233 に答える