0

以下のように、ボタンでホバリング イベントを実行します。

<div id="common_id">
<div class="button" id="make_larger">
<button type="button">Large</button> 
</div>
<div class="button" id="make_small">
<button type="button">Smaller</button> 
</div>
<div class="button" id="make_normal">
<button type="button">Normal</button> 
</div>
</div>

JQuery コードは次のとおりです。

 $('#common_id .button').hover(function () {
            $(this).addClass('hover1');
        }, function () {
            $(this).removeClass('hover1');

        });

CSS は次のとおりです。

.hover1 {

background-color:Black;
position:relative;

}

マウスをボタンの上に置くと、行全体（ページの最初から最後まで）が黒くなりますが、ボタンは黒くなりませんが、その行に沿って背景が黒く見えます。ホバーしたときにボタンを黒くしたい。なぜ機能しないのですか？

前もって感謝します。

4

4 に答える 4

2

jQuery を完全に削除し、次を使用します。

#common_id .button:hover {
    background-color:Black;
    position:relative;
}
于 2012-08-08T10:58:05.583 に答える
1

Sohheeの答えは正しいですが、必要なCSSスクリプトは

#common_id .button botton:hover {
   background-color:Black;
   position:relative;
}
于 2012-08-08T11:09:28.910 に答える
0

cssのみの答えが最善だと思いますが、次の例のように、jQueryセレクター$（'button'）を使用してページ上のボタンを選択できます：http：//jsfiddle.net/2fH7f/

于 2012-08-08T11:01:16.660 に答える
0

div は 100% の幅を取っています。そのため、div を選択する代わりにボタンを選択します。したがって、セレクターは次のようになります

$('#common_id .button button').hover(function () {
            $(this).addClass('hover1');
        }, function () {
            $(this).removeClass('hover1');

        });​

このフィドルを試してください

于 2012-08-08T10:58:20.423 に答える