インライン疑似スタイルを作成することはできますか？

Question

インライン疑似スタイルを作成することはできますか？

たとえば、次のようなことができますか？

<a href="#" style="background-color:green;{hover:background-color:red;}">Coding Horror</a> 

私はUIエレメントを作成する.NETライブラリを開発しています。私は外部スタイルシートを使用せずにホバー状態を設定できるHTML要素を生成したい。

Answer 1

残念ながら、インラインCSSを使用してホバー効果を実装することはできません。

この問題の回避策は、レンダリング時にコントロールがスタイルブロックをレンダリングするようにすることです。あなたは自分のページの上部にある「スタイルの管理」をドロップするようにユーザーを強制することができれば、あなたがそこにすべてのカスタムクラスをレンダリングする代わりに、次の各にそれらをレンダリングすることができ

<style type="text/css"> 
    .custom-class { background-color:green; } 
    .custom-class:hover { background-color:Red; } 
</style> 
<a href="#" class="custom-class">Coding Horror</a> 

：たとえば、あなたのコントロールはとしてレンダリングすることができ（ブラウザがスタイルブロックを遭遇するたびにレンダリングを再開し、ページの周りに多くのスタイルブロックが散在するとレンダリングが遅くなります）。

残念ながら、この問題に対する洗練された解決策はありません。

Answer 2

jQueryのhover機能を使用して、背景色を設定することができます。

Answer 3

これはCatch-22のような状況です。

一方で、要素がページに挿入される直前にスタイルブロックを追加できますが、Chris Pebbleはその問題を指摘しています。 （あなたがこれを決める場合、セレクタが間違って他のものを選択したりスタイルしたりすることがないように、要素の一意のIDを選択するようにしてください。それは、マークアップ、プレゼンテーション、行動、および他のものの全体の束を結びつけるとしてそれはそれ自体では厄介だ、

<a href="#" onmouseover="this.style.color=red;" onmouseout="this.style.color='blue';">...</a> 

しかし：

一方で、あなたはこのような何かを行うことができます。

また、リンクタグを書き込むか、document.stylesheetsを操作してスタイルシートを挿入することもできますが、それはダウンロードをトリガーすることになります。

私は通常、大規模で行われた最初の方法（スタイルブロックの追加）を見ました。 "モジュラー"ポータルサイトはこのようなことをしているので、デファクトスタンダード（JavaScriptをそこに詰め込むよりも、少なくとも読みやすく、保守が簡単かもしれません）。 JavaScriptメソッドは、プレゼンテーションを自分自身に任せているときに、DOMと全体のページに与える影響が最も小さいようです。

これは、あなたが選択したすべての回答がある程度間違っているフロントエンドデベロッパーの1つです。そのため、オプションを評価し、作成して維持するのが最も簡単なものを選んでください。

Answer 4

すべてのコントロールを解析するときにCSSファイルを動的に作成し、ホバーまたはその他の擬似クラススタイルを含むコントロールにサーバーサイド属性を追加します。

<a style="color:blue" styleHover="color:blue" id="a1">Click!</a> 

あなたのコードは、これらの属性を探して、フライ

#a1:hover { 
    color:blue 
} 

あなたは、属性の解析のこのタイプを行うにするために、.NETが許すならば、私は知らないのCSSファイルを生成することができます私はPHPのために作成したフレームワークで同様のことをしています。