javascript - jquery - 如何在悬停时更改 li 中按钮的显示 css 属性

Question

我有一个 <li>悬停时，应更改该 <li> 中按钮的 css“显示”属性.这个想法是将鼠标悬停在 <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');
});

但是当我将鼠标悬停在页面上时没有任何反应。我做错了什么？

Answer 1

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

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

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