javascript - 如何切换扩展元素的类？

Question

在此fiddle code当我将鼠标移到黑框上时，应该会出现一个红框，但实际上并没有。

这个脚本正确吗？

$('nav#products ul li div#info').hover(function () {
  $('nav#products ul li div#more_info').toggleClass('show');
});

Answer 1

是因为css specificity , ID 规则优先于类规则 - 你有一个 ID 规则设置 display: none 然后是一个类规则设置 display:block 但 ID 规则将始终覆盖类规则。

您需要结合这两者来创建更具体的规则来覆盖 ID 规则

#more_info.show {
    display:block;
}

演示:Fiddle

另请注意，由于您拥有目标元素的 ID，因此您可以使用简单的 ID 选择器而不是您使用的更复杂的选择器 - 元素的 ID 在文档中必须是唯一的