Question

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

<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/

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

这里有什么问题？ html代码看起来相同，两个示例都为div添加了内联样式。

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

谢谢。

Answer 1

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

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

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

与将元素应用于元素相同，这就是您上面的“仿真”对<style>内的<div>元素的影响。< / p>

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

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

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

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

请注意，如果您使用.show()和.hide()而不是通过display方法明确设置.css()属性，则会更整洁。

内联样式与jQuery .css

1 个答案: