1. ホーム
  2. html

[解決済み] CSSで:hoverとして動作するインラインスタイル

2022-09-26 06:17:54

質問

CSSスタイルを直接HTMLタグに埋め込むと、CSSの目的の多くを失うことは知っていますが、時にはデバッグの目的で、以下のように便利なことがあります。

<p style="font-size: 24px">asdf</p>

のようなルールを埋め込むための構文とは。

a:hover {text-decoration: underline;}

をAタグのstyle属性に入れるか?明らかにこれじゃないだろ...。

<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 beta 2、Firefox、Chromeでは動作しません。 どなたか他のブラウザでテストしていただけませんか?