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

Question

我有一个<li>onhover，应该更改该按钮的 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');
});

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

Answer 1

你可以在没有 JavaScript 的情况下做到这一点：

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

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

Answer 2

这也可以只用 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.或button.选择器指定要为类的哪个元素select-bldg编写规则。这样，您的 CSS 会保持清洁，并且将来可以更轻松地重用类或重写它们。

Answer 3

试试这个 - （应该改变其中一个按钮的css'display'属性<li>）

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

演示