2

1 つの要素にカーソルを合わせたときに複数の要素を強調表示することは、よくある質問です。この問題について Stackに同様の質問がいくつかありますが、通常は 1 層の情報しか扱っていません。

例:このボックスをクリックすると、別のボックスが強調表示されます。

この機能を 3 層の情報に追加して、交互に機能させたいと考えています。

ここでフィドルを参照してください。

動作していることがわかりますが、より良い方法があるかどうか疑問に思っています。たとえば、各層に 12 個程度のオプションがある場合は問題ありませんが、50 個または 100 個の場合はどうでしょうか。それを合理化する方法はありますか?IDに関連するすべてのクラス名を手動で追加することなく、各層に複数のアイテムを追加する方が簡単ですか?

変数を関数に渡すことで明示的なクラス名を少し開くことができるようですが、ホバーされたオブジェクトのすべてのクラス名を取得し、それらを他のオブジェクトのクラス名と照合する方法がわかりません層。

または、これを魔法のように行うプラグインを知っている場合は?

4

1 に答える 1

1

これは、jQuery でそれを行う最良の方法です。親要素に適用された CSS とクラスでも同様の効果を得ることができます。

例えば：

<div>
    <div class="bob">This is Bob.</div>
</div>

次に、親要素にクラスを追加します。

<div class="show-bob">
    <div class="bob">This is Bob.</div>
</div>

もちろん、ここでは CSS が重要です。

.bob { opacity: 0.75 }
.show-bob .bob { opacity: 1 }

確かに、実際の機能を同等にするためにいくつかの CSS アニメーション プロパティを追加する必要がありますが、要点はわかります。

于 2012-07-26T21:53:00.870 に答える