在此fiddle code当我将鼠标移到黑框上时,应该会出现一个红框,但实际上并没有。
这个脚本正确吗?
$('nav#products ul li div#info').hover(function () {
$('nav#products ul li div#more_info').toggleClass('show');
});
最佳答案
是因为css specificity , ID 规则优先于类规则 - 你有一个 ID 规则设置 display: none
然后是一个类规则设置 display:block
但 ID 规则将始终覆盖类规则。
您需要结合这两者来创建更具体的规则来覆盖 ID 规则
#more_info.show {
display:block;
}
演示:Fiddle
另请注意,由于您拥有目标元素的 ID,因此您可以使用简单的 ID 选择器而不是您使用的更复杂的选择器 - 元素的 ID 在文档中必须是唯一的
关于javascript - 如何切换扩展元素的类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21811089/