1

Javascript によって生成された SPAN でラップされたテキストがあり、生成時にインライン スタイルが含まれています。次のようなものです：

<div id="test">
    <span style="color: red">Text 1</span>
    <span style="color: blue">Text 2</span>
    <span style="color: green">Text 3</span>
    ...
</div>

ただし、通常はすべてのテキストを 1 つの色にしたいので、ホバー時にのみインラインで定義された特別な色が表示されるようにします。もちろん問題は、非ホバー スタイルのインライン スタイルをオーバーライドするために、!important宣言を含める必要があることです。その後、スタイリングを定義するとき、私:hoverにできることは何もありません。

#test > span {
    color: black !important;
}
#test:hover > span {
    color: inline; // Does not exist!
}

私が知らないオプションはありますか？または、これを達成するためのより良い方法はありますか?

Javascript onmouseover を実行してインライン スタイルを追加してから、onmouseout を削除することはできません。誰かがそれを提案したい場合に備えて。

編集：

すべてのテキスト SPAN を親 SPAN に埋め込み、親にインライン スタイルを適用し、重要なフラグを介して子を均一な色に強制し、ホバー時に子をinherit親から強制的に離します。 ……それでいいじゃないですか。もっとエレガントなものはありますか？

4

1 に答える 1

2

テキストを別のスパンにネストしても機能し、親から色を継承できます。

個人的には、それぞれにクラスを与え、ホバー時に色を変えるべきだと思います。

このように: http://jsfiddle.net/576Ez/

HTML

<div id="test">
    <span class="red hover">Text 1</span>
    <span class="blue hover">Text 2</span>
    <span class="green hover">Text 3</span>
    ...
</div>

CSS

#test .red.hover:hover {
    color: red;
}
#test .blue.hover:hover {
    color: blue;
}
#test .green.hover:hover {
    color: green;
}
于 2013-04-06T06:07:12.457 に答える