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