影響を受けるHTMLタグにCSSスタイルを直接埋め込むと、CSSの目的の多くが損なわれることは知っていますが、次のようにデバッグの目的で役立つ場合があります。
<p style="font-size: 24px">asdf</p>
次のようなルールを埋め込むための構文は何ですか。
a:hover {text-decoration: underline;}
Aタグのスタイル属性に？明らかにこれではありません...
<a href="foo" style="text-decoration: underline">bar</a>
...ホバー中だけではなく、常に適用されるためです。
回答:
恐れ入りますが、疑似クラスセレクターをインラインで設定することはできません。ページまたはスタイルシートで行う必要があります。
私がいることを言及する必要があり、技術的にあなたがすべきことを行うことができるCSSの仕様に応じて、ほとんどのブラウザがそれをサポートしていません。
編集：私はこれで簡単なテストをしました：
<a href="test.html" style="{color: blue; background: white}
:visited {color: green}
:hover {background: yellow}
:visited:hover {color: purple}">Test</a>
また、IE7、IE8ベータ2、Firefox、Chromeでは機能しません。他の誰かが他のブラウザでテストできますか？
style属性を持つ疑似要素を挿入することはできなくなりました。
デバッグのみを行う場合は、javascriptを使用してcssを変更できます。
<a onmouseover="this.style.textDecoration='underline';"
onmouseout="this.style.textDecoration='none';">bar</a>
簡単な解決策：
<a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>
または
<script>
/** Change the style **/
function overStyle(object){
object.style.color = 'orange';
// Change some other properties ...
}
/** Restores the style **/
function outStyle(object){
object.style.color = 'orange';
// Restore the rest ...
}
</script>
<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>
デバッグ用の場合は、ホバリング用のcssクラスを追加するだけです（要素は複数のクラスを持つことができるため）。
a.hovertest:hover
{
text-decoration:underline;
}
<a href="http://example.com" class="foo bar hovertest">blah</a>
私は、onmouseoverおよびonmouseoutの動作を使用して、CSSなしでホバーポップアップを作成したい人のための簡単なソリューションをまとめました。
<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>
その<p>タグがJavaScriptから作成されている場合は、別のオプションがあります。JSSを使用して、プログラムでスタイルシートをドキュメントヘッドに挿入します。サポートし'&:hover'ます。https://cssinjs.org/