我有一个<li>悬停鼠标,应更改该<li>中按钮的css'display'属性。想法是,将鼠标悬停在该<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');
});


但是,当我将鼠标悬停在页面上时,什么也没有发生。我究竟做错了什么?

最佳答案

您可以在没有JavaScript的情况下执行此操作:

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

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

10-02 19:56