javascript - jQuery-如何在悬停时更改按钮的显示CSS属性

我有一个<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;
}