jquery - 如何更改一个li上的按钮的显示css属性悬停

我有一个<li> onhover，应该更改在该<li>内的按钮的CSS'显示'属性。这个想法是盘旋在那<li>应该出现一个按钮。jquery - 如何更改一个li上的按钮的显示css属性悬停

现在我的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'); 
});

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

来源

2013-05-12 Zephyr4434

你有没有做过一些调试，你会得到任何JavaScript错误？还要小心使用类作为选择器，因为它将选择具有该类的所有元素。 – Nomad101 2013-05-12 21:15:47

你的代码工程http://jsfiddle.net/uDbNp/。控制台中必须记录其他一些错误。 – PSL 2013-05-12 21:17:25

您是否记得文档准备好了？ – adeneo 2013-05-12 21:23:05

（应该内<li>更改按钮的样式表 '显示' 属性），你可以这样做没有JavaScript：

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

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

来源

2013-05-12 21:19:27 Blender

谢谢，这个伎俩！ jquery也能工作，但这是实现我想要做的更简单的方法！ – Zephyr4434 2013-05-12 21:32:32

试试这个 -

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

DEMO

来源

2013-05-12 21:16:33

如果没有什么事情发生时只使用类，如何添加上下文帮助？ – adeneo 2013-05-12 21:20:31

这也可以用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。让你的班级“不知道”他们所应用的元素被认为是更好的做法。在您使用li.或button.选择器指定的CSS中，您想要编写规则的类select-bldg的哪个元素。通过这种方式，CSS可以保持更清洁，并且将来可以更轻松地重用类或重写它们。

来源

2013-05-12 21:24:09 Roemer

由于CSS是从右向左读取的，使用标记名实际上在大多数情况下效率较低。 – adeneo 2013-05-12 21:28:04

我同意，从浏览器的角度来看。但速度损失（我认为）远低于开发人员（团队）在简单性和维护方面的收益。我们已经通过用简单的CSS替换JS（和jQuery）函数来获得速度。 – Roemer 2013-05-12 21:30:57

jquery - 如何更改一个li上的按钮的显示css属性悬停

回答

相关问题