如何切换扩展元素的类？

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在文档中必须是唯一的