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にインラインスタイルを追加しています。

問題は、なぜ2番目のシナリオが機能しないのかということです。

ありがとうございました。

4

1 に答える 1

2

一般的な意味では、個々の要素に直接適用されるスタイルは、スタイルシートの設定よりも優先されます。これは、「CSS」の「C」である「カスケード」効果（の一部）です。したがって、ドキュメント内で次のようにjQueryを使用して要素を非表示にすると、次のようになります。

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

...style="display:none"同じ「問題」がある要素に直接追加するのと同じです：http：//jsfiddle.net/Z2mtF/2/

これは、要素にクラスを適用することと同じではありません<style>。これは、上記の「エミュレーション」が内の要素で行っていたこと<div>です。

したがって、ホバールールは有効にするほど重要ではありません。これを修正する1つの方法は、ホバールールを重要にすることです。

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

デモ： http： //jsfiddle.net/Z2mtF/1/

としてマークされたスタイルシートの設定は!important、インラインスタイル属性よりも優先されます。

メソッドを介してプロパティを明示的に設定する代わりに、.show()を使用する方が整理されていることに注意してください。.hide()display.css()

于 2012-11-30T00:29:51.677 に答える