6

:hoverすべてのクラスを、要素のインデックスである.hoveridクラスにコピーしたいと思いますid（または、unqiueホバークラス名を作成する他の方法）。

したがって、私のアイデアは、定義されているページ上のすべての要素を反復処理し、:hoverそのクラスをに複製すること.hoveridでした。このようにして、次のように必要な要素にホバー効果をトリガーできます。

$('#element').addClass('hover'+$(this).id);

だから私の質問は実際には次のとおりです：

  1. 「：hover」が定義されている要素を反復処理するにはどうすればよいですか？
  2. そのクラスを別のクラスに複製するにはどうすればよいですか？

ソリューションを試すためのフィドル：http：//jsfiddle.net/kLt2P/

4

3 に答える 3

3

JS と CSS は互いに完全に独立しています。つまり、JS が要素に作用するため、要素の CSS プロパティにはアクセスできますが、JS を介して CSS クラスのプロパティにアクセスすることはできません。

ソリューション
これを解決するためにいくつかのハックなソリューションを使用できますが、おそらく最善のソリューションは、jQuery で「逆拡張」メソッドを作成することです。.extend()つまり、 2 つの配列を取り、最初の配列とは異なる、または存在しないすべてのプロパティを 2 番目の配列で返すこととは反対のことを行うメソッドを作成する必要があります。これは実際には思ったほど難しくありません。

次に行うことは、ページ上の各要素を取得し、それらに対して「逆拡張」メソッドを実行することです。.css()ホバリングしていないときに要素のメソッドを呼び出して返された配列を最初のパラメータとして渡し、ホバリング.css()中に要素のメソッドを呼び出したときに返された配列を 2 番目のパラメータとして渡す必要があります。

結果の配列が空でない場合、要素には:hoverクラスが定義されています (または JS が適用された:hoverクラス)。キッカーは次のとおりです。結果の配列には、:hoverクラスのすべてのプロパティが含まれます。

ホバーのキャプチャに関する注意: 、、および
をバインドすることにより、ホバーをキャプチャできます。もう一方が完了したかどうかを示すために、変数フラグを使用および使用することをお勧めします。一部のブラウザーでは同時に実行される可能性があるため、クラスの重複クローンを防ぐために、メソッドとメソッドを使用して、ハンドラーのバインドとバインド解除に少し余分な機能が必要になる場合があります。この実装により、すべての主要なブラウザー (IE6-10、Safari、Opera、Chrome、および Firefox) でサポートが提供されるはずです。更新:疑似ホバー状態をトリガーできることについて、私は間違っていました (申し訳ありません) - これは JS では不可能です。ただし、このソリューションをキャプチャに使用できますmouseinmouseenterhovermouseinmouseenter.on.off
ホバーし、最初にホバーしたときにクラスのプロパティを複製します。次に、ホバーした要素を jQuery 配列に追加できます。これを使用して、同じ要素を複数回 ( を使用して) 見ないようにします.not。これの欠点は、同じクラスが複数の要素に割り当てられている:hover場合、疑似クラスを複数回複製することを防ぐことができないことです。:hover


ご不明な点がございましたら、お気軽にお問い合わせください。幸運を！:)

于 2013-01-29T19:19:26.400 に答える
3

実際に JSCSSP のようなライブラリを使用して、( $('link['rel="stylesheet"']).attr('href') )何らかの方法ですべての CSS ファイルを解析し、それに基づいてクラスを作成することができます。別の方法は、基本的な正規表現を使用して自分で解析することです。今のところアイデアはありませんが、何か試してみます。

パフォーマンスのために Webworker を使用することもできます。

http://www.glazman.org/JSCSSSP/

于 2013-01-29T19:23:26.153 に答える
2

CSS はすでにこの作業を行っています。あなたのCSSで、

.hoverid:hover
{
    // your hover styling.
}

「ホバリング」効果を要素に動的に配置するには、class="hoverid" またはで生成します

$('#element').addClass('hoverid');

hoveridは非常に珍しい名前なので、さまざまなホバリング スタイルを意味していると思います。その場合、スタイルのセマンティクスと動作が異なる理由を定義するさまざまな CSS クラスを使用するだけです。

例えば：

.definition:hover { }
.syntax:hover { }
.useroption:hover { }

そして、必要な要素に適切なセマンティック CSS クラスを適用します。出来上がり！要素のタイプに基づいて、適切な動的結果が得られます。

このクラスを追加して「動的に」トリガーできるようにしたいことを理解すると、次のように CSS を定義できます。

.definitionhover, .definition:hover { }

.addClass("definitionhover")CSS の自動ホバー フォーマットを保持しながら、クラスにアクセスできます。

個々の ID でこれを実行できる命名規則を作成する方法については、http://jsfiddle.net/kLt2P/1/を参照してください。

CSS を変更せずにこれを行う方法については、http://jsfiddle.net/kLt2P/5/を参照してください。注: これは実際の css を解析するため、セレクターとしてファイルで定義されている正確な値が必要です。

http://jsfiddle.net/kLt2P/14/を参照して、動的スタイルシートを作成して両方の方法をまとめてください。

于 2013-01-29T19:21:25.860 に答える