0

我遇到了一个仅使用 css 显示元素内部的隐藏 div 的示例

<style type="text/css">
#shopCart:hover .shopCartDetail {
    display: block;
}
</style>

<div id="shopCart">
Shop Cart
<div class="shopCartDetail"><style>.shopCartDetail {display:none}</style>
    This is Shop Cart Detail</div>
</div>

这里的工作示例http://jsfiddle.net/7DRTD/

在我的场景中，样式 display:none 是由 jQuery 创建的。使用悬停显示隐藏的 div 不起作用：http: //jsfiddle.net/Z2mtF/

这里可能是什么问题？html 代码看起来相同，两个示例都将内联样式添加到 div。

问题是：为什么第二种情况不起作用？

谢谢你。

4

1 回答 1

2

一般来说，直接应用于单个元素的样式优先于样式表中的设置。这是（部分）“级联”效果，即“CSS”中的“C”。因此，当您使用 jQuery 隐藏元素时，请在文档中准备好以下内容：

$(".shopCartDetail").css("display","none");

...它相当于style="display:none"直接添加到元素，它具有相同的“问题”：http: //jsfiddle.net/Z2mtF/2/

这与将类应用于元素不同，这是您上面的“模拟”<style>对<div>.

所以悬停规则不够重要，无法生效。解决此问题的一种方法是使悬停规则变得重要：

#shopCart:hover .shopCartDetail
{
    display: block !important;
}

演示：http: //jsfiddle.net/Z2mtF/1/

样式表中标记为的设置!important将优先于内联样式属性。

请注意，如果您使用.show()and而不是通过该方法.hide()显式设置display属性，它会更整洁。.css()

于 2012-11-30T00:29:51.677 回答