0

<li>そのオンホバーがあり、その内のボタンのcss 'display'属性を変更する必要があります<li>。その上にカーソルを合わせると<li>、ボタンが表示されるはずです。

現在、私のHTMLは次のとおりです。

<li class="select-bldg-listing">
     <button class="select-bldg-btn">Review</button>
</li>

私のCSS：

.select-bldg-btn {
display: none;
 }

jQuery:

$('.select-bldg-listing').hover(function () {
    $('.select-bldg-btn').css('display', 'inline-block');
},
function(){
    $('.select-bldg-btn').css('display', 'none');
});

しかし、ページ上でマウスオーバーしても何も起こりません。私は何を間違っていますか？

4

3 に答える 3

1

JavaScript なしでこれを行うことができます。

.select-bldg-btn {
    display: none;
}

.select-bldg-listing:hover .select-bldg-btn {
    display: inline-block;
}
于 2013-05-12T21:19:27.577 に答える
0

これは、CSS だけで行うこともできます。

li.select-bldg-listing button.select-bldg-btn {
    display: none;
}

li.select-bldg-listing:hover button.select-bldg-btn {
    display: inline-block;
}

クラスの命名に関するコメント。クラス名にlistingとを含めます。btnクラスが適用される要素を「認識しない」ようにすることをお勧めします。CSS では、ルールを記述したいクラスの要素をli.orセレクターで指定します。こうすることで、CSS をよりクリーンに保ち、将来クラスを再利用したり書き直したりすることが容易になります。button.select-bldg

于 2013-05-12T21:24:09.817 に答える
0

これを試してください-（その中のボタンのcss 'display'属性を変更する必要があります<li>）

$('.select-bldg-listing').hover(function () {
    $('.select-bldg-btn',this).css('display', 'inline-block');
},
function(){
    $('.select-bldg-btn',this).css('display', 'none');
});

デモ

于 2013-05-12T21:16:33.753 に答える