インラインCSSでa：hoverを書く方法は？

1017

インラインCSSコードを記述しなければならない場合があり、アンカーにホバースタイルを適用したいと思います。

a:hoverHTMLスタイル属性内でインラインCSS を使用するにはどうすればよいですか？

たとえば、HTMLメールでCSSクラスを確実に使用することはできません。

html  css  inline-styles 
— Amr Elgarhy
ソース
24
ブログアプリケーションにHTMLを埋め込むには、インラインスタイルの排他的な使用も必要になることがよくあります。特に、サードパーティのクライアントを介してHTMLを埋め込み、ユーザーのテーマにアクセスできない場合。
— プロビデンス2011
8
このためのCSS標準が提案されています。どのようなブラウザーサポートがあるかわからない（ヒント：-mozなどのカスタムタグを使用している可能性があります）：w3.org/TR/2002/WD-css-style-attr-20020515
— Kato
1
— Synetech 2012年
17
あら。ランディングページのプロトタイプを作成しているだけで、スタイルシートをフォークしたり、新しいテンプレートブランチを作成したりする必要がない場合は、緑色のボタンが適切に機能するかどうかをテストするだけです。シーッシュ。
— ElBel 2013
1
@FriendlyNeighborhoodIdiotこのページは13年前のものであり、ドラフトは放棄されています。
— Tofandel

回答:

573

短い答え：できません。

長い答え：すべきではありません。

クラス名またはIDを指定し、スタイルシートを使用してスタイルを適用します。

:hoverは擬似セレクタであり、CSSの場合、スタイルシート内でのみ意味があります。インラインスタイルに相当するものはありません（選択基準を定義していないため）。

OPのコメントへの応答：

CSSルールを動的に追加するための適切なスクリプトについては、JavaScriptを使用したTotally Pwn CSSを参照してください。スタイルシートの変更もご覧ください主題に関する理論の一部については、。

また、オプションの場合は、外部スタイルシートへのリンクを追加できます。例えば、

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

注意：上記は、ヘッドセクションがあることを前提としています。

— ジョナサン・フィンランド
ソース
4
JavaScriptでCSSクラスを追加できます
— Jonathan Fingland
204
インラインCSSが唯一のオプションである他の状況があります-HTMLメールなど（たとえば、Gmailはインラインでない限りCSSを無視します）。残念ながら、ほとんどの電子メールクライアントでJavaScriptが取り除かれているため、：hover効果を追加する方法はまだ見つかりません。
— Simon East
24
@Katoはすばらしいリンクですが、うまく機能したいのですが、残念ながらうまくいきません。確認のために、構文style="{color:green;} :hover { color: red; }"を使用してテストしたところ、Firefoxはリンクを緑色に着色できましたが、ホバーを無視しました。Chromeは両方を無視しました。継続的なテストはかなり無意味です。
— ジョナサンフィンランド、2011年
9
私はそれを実用的な解決策として述べていません。「完全に」正しくないので、同等のインラインはなく、疑似セレクターはスタイルシート以外では意味がないと述べました。それはどのように不適切ですか？
— 加藤
5
なぜ長い答えが必要なのですか。私はHTMLで電子メールメッセージを送信しようとしていましたが、どうでしょう... Gmailはすべてのスタイルタグ、すべての外部スタイル参照、およびすべてのスクリプトを削除します。だから... Gmailに送信されたメール内のリンクのホバーカラーをスタイルする方法はありますか？それがうまくいくことを願っています...希望が最後に死ぬことです!!! =）
— ミゲルアンジェロ
435

onMouseOverおよびonMouseOutパラメータでJavaScriptを使用してスタイルを変更することで同じ効果を得ることができますが、複数の要素を変更する必要がある場合は非常に非効率的です。

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>
スニペットを展開

また、thisこのコンテキストで機能するかどうかは、はっきりとは思い出せません。で切り替える必要がある場合がありますdocument.getElementById('idForLink')。

— アレックスS
ソース
12
それは賢いです！背景色ホバー効果にも対応<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
— mxro 2013年
46
これが「賢い」と見られているのを笑わなければなりません:)これがこの効果を達成するための目立った/唯一の方法だったときに、周りにいなかった人がいるとは想像しがたいです。またはさらに悪いことに、「ホバー」効果を与えるためだけに「イメージ」を持ち、そのイメージを交換する必要があります。私を古く感じさせる！しかし、十分に言って、それはOPの質問に答えます:)
— Manachi
5
私はこれについてマナチに同意しなければなりません。これは、JavaScriptの90年代ジオシティーズにフラッシュバックのようなものです; P
— エリック・カストロ
9
古いもの、新しいもの、古代のもの、または先のもの。それは質問に答えて、私を助けました。@peter、ありがとう。
— user2060451 2016
4
メールでこれを行う必要があり、うまくいきました。ありがとうございました！これは、受け入れられた回答とは異なり、実際に質問を解決します。
— theUtherSide 2018
53

あなたは過去のある時点でそれを行うことができました。しかし、現在（同じ標準の最新リビジョンによると、Candidate Recommendation）、これはできません。

— 愚かな
ソース
3
他のすべての答えは不可能であると述べましたが、あなたの答えはそれが可能であることを示しています。あなたの答えは異なります。私はそれをテストしています。
— Amr Elgarhy
2
すみません、記事の日付を確認しました。その10歳。したがって、動作するという保証はありません。あれば、教えてください。
— fuddin
2
私はこれをテストしました：<a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> しかし、それはうまく
— いき
5
ケースの誰もがこの答えに出くわすでは、回答は、ここにこの機能についての質問を投稿：stackoverflow.com/questions/9884182/...
— BoltClock
9
より正確に言うと、過去のある時点でそれを行うことができます。しかし、今では（同じ標準の最新リビジョンによると、Candidate Recommendationです）できません。
— Ilya Streltsyn 2013
34

私はこれに貢献するのが非常に遅いですが、誰かがこれを提案していないのが悲しかったです。実際にインラインコードが必要な場合、これは可能です。ホバーボタンに必要でしたが、メソッドは次のとおりです。

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}
<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a
スニペットを展開

この場合、インラインコードは「background-color：red;」です。ホバーのスイッチの色です。そこに必要な色を入れると、このソリューションが機能します。これは互換性の点では完璧な解決策ではないかもしれませんが、絶対に必要な場合は機能します。

— Lukesrw
ソース
4
ありがとうございました。それは素晴らしい答えです。この答えは解決策であるに違いないと思います。
— Hovhannes Sargsyan 2015
64
いいえ、OP はHTMLスタイル属性内のインラインCSSでそれを望んでいると述べました。
— jj_
3
jj_-は知っていますが、この方法ではCSSに数行しか入力できず、多くの場所で繰り返し使用できます。多くの人（私を含む）は、これが役立つ代替手段であると考えています。
— lukesrw 2016
2
これは実際の答えであり、少し変更します。スタイルに色を設定せず、ホバーしたときに親から継承するルールを設定し、2つの色をインラインに設定します。
— Hayko Koryun 2016年
4
これは、「通常の」方法であり、誰もが正しい方法だと言っていました。ただし、それはインラインの方法ではなく、OPの元の要求でした。
— wcndave 2018年
31

a:hoverはCSSルールではなくセレクタの一部であるため、説明していることを正確に行うことはできません。スタイルシートには2つのコンポーネントがあります。

selector {rules}

インラインスタイルにはルールのみがあります。セレクタは暗黙的に現在の要素になります。

セレクターは、XMLのようなドキュメントの要素に一致する一連の基準を記述する表現言語です。

ただし、styleセットは技術的にほとんどどこにでも移動できるため、接近することができます。

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>
— レックスM
ソース
3
実際にはできません：「HTMLでは、ドキュメントのHEADセクションにあるSTYLE要素をいくつでも許可しています。」（w3.org/TR/html4/present/styles.html#edef-STYLE）
— エリックアラウージョ
2
私のマシンで動作します。ありがとう！
— Josh Habdas 2016年
@ÉricAraujo：次に、すべてのコンテンツを<html> </html>タグで
— 囲みます
30

JavaScriptを使用：

a）インラインスタイルの追加 

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b）または少し難しい方法-「マウスオーバー」を追加する

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

注：font-sizeJavascriptの複数単語スタイル（つまり）は一緒に記述されます。

element.style.fontSize="12px"

— T.トドゥア
ソース
3
この回答は編集されているため、元の質問とはまったく無関係であるように見えます...
— Bill
1
うわー、それは箱の外で考えています...私はそれが大好きです！
— theglossy1 2016年
14

これは最良のコード例です：

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>
スニペットを展開

モデレーターの提案：懸念事項の分離を維持してください。

HTML 

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>
スニペットを展開

JS

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}
スニペットを展開

— ユーザー1476842
ソース
10

インライン疑似クラス宣言は、CSSの現在のイテレーションではサポートされていません（ただし、私が理解している限りでは、将来のバージョンで提供される可能性があります）。

現時点では、スタイルを設定するリンクのすぐ上にスタイルブロックを定義することをお勧めします。

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
— inkedmn
ソース
4
幸いなことに、その考えは捨てられます。（lists.w3.org/Archives/Public/www-style/2009Jun/0341.htmlの「放棄されたワーキングドラフト」を参照してください。）
— Ms2ger
3
があります。この答えに欠けています。
— Joel
9

指摘したように、ホバーに任意のインラインスタイルを設定することはできませんが、CSSでホバーカーソルのスタイルを変更するには、適切なタグで次を使用します。

style="cursor: pointer;"
— ラザフォード
ソース
2
それが最良の答えになるはずです
— Vladislav Guleaev
6 
<style>a:hover { }</style>
<a href="/">Go Home</a>

ホバーは疑似クラスであるため、スタイル属性を使用して適用することはできません。これはセレクターの一部です。

— ジョエル
ソース
2
@Derekがまだ関心のある場合/他の人が読んでいる場合： "〜/"（チルドスラッシュ）は、asp.net Webアプリケーションのアプリケーションルートへのサーバー側参照です。（もちろん、アプリケーションルートはサブフォルダである場合があります）。ここでの使用は正しくなかったので、質問した後で回答が編集された理由（私はそう思う）。
— Chris
5

あなたはこれを行うことができます。しかし、インラインスタイルではありません。イベントonmouseoverとonmouseoutイベントを使用できます。

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>
スニペットを展開

4

コメントによると、とにかくJavaScriptファイルを送信しています。JavaScriptでロールオーバーを実行します。jQueryの$.hover()メソッドは、他のすべてのJavaScriptラッパーと同様に、それを簡単にします。ストレートJavaScriptでもそれほど難しくありません。

— ビニール・シャー
ソース
これは回避策ですが、私にとって非常に良い答えであり、インラインホバーを書くことが本当にできない場合の最良の答えです
— Amr Elgarhy
4

これを行う方法はありません。オプションは、JavaScriptまたはCSSブロックを使用することです。

多分、独自のスタイル属性をスタイルブロックに変換するJavaScriptライブラリがいくつかあります。ただし、コードは標準に準拠しません。

— m_vitaly
ソース
2

別の解決策を見つけました。

私の問題：<a>スライド/メインコンテンツビューアの周囲に<a>タグがあり、フッターにもタグがあります。IEの同じ場所に移動してほしいので、onHoverリンクではなくても段落全体に下線が引かれます。スライドは全体としてリンクです。IEは違いを知りません。フッターには、下線と色の変更が必要な実際のリンクもいくつかありますonHover。色を変更するにはスタイルをフッタータグに合わせて配置する必要があると思いましたが、上記のアドバイスから、これは不可能であることが示唆されています。

解決策：フッターリンクに2つの異なるクラスを指定しました。私の問題は解決されました。onHover1つのクラスで色を変更でき、スライドにonHover色の変更/下線を付けずに、フッターとスライドに同時に外部HREFを含めることができました。

— リズ
ソース
1

影に同意する。onmouseoverand onmouseoutイベントを使用して、JavaScript経由でCSSを変更できます。

また、JavaScriptを有効にする必要があると言ってはいけません。これはスタイルの問題にすぎないため、JavaScriptを使用していない訪問者がいるかどうかは関係ありません;）ほとんどのWeb 2.0はJavaScriptで動作しますが。Facebookの例（JavaScriptの多く）またはMyspaceを参照してください。

— ジェイズン
ソース
0

これはかなりゲームの後半ですが、HTMLメールでJavaScriptを使用するのはいつですか？たとえば、私が現在勤務している会社（Abodeeの韻）では、ほとんどのメールマーケティングキャンペーンに共通の最小基準を使用しています。JavaScriptは使用されていません。ずっと。あなたが何らかの前処理に言及しているのでなければ。

関連する投稿で述べたように、「Lotus Notes、Mozilla Thunderbird、Outlook Express、およびWindows Live Mailはすべて、なんらかのJavaScriptの実行をサポートしているようです。他には何もサポートしていません。」

これが取られた記事へのリンク：[ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

また、ホバリングはモバイルデバイスにどのように変換されますか？それが私が上からの答えを好きな理由です：Long answer: you shouldn't.

誰かがこの主題についてより深い洞察を持っている場合は、私を修正してください。ありがとうございました。

— ショーンスペンサー
ソース
0

したがって、これはユーザーが探していたものとはまったく異なりますが、私はこの質問が回答を検索していることに気づき、何らかの関連性を考え出しました。私はそれらの中にタブの新しい色/ホバーを必要とする繰り返し要素の束を持っていました。私のソリューションでは重要なハンドルバーを使用していますが、他のテンプレート言語でも機能する可能性があります。

いくつかの色を定義し、各要素のハンドルバーテンプレートにそれらを渡しました。テンプレートの上部でスタイルタグを定義し、カスタムクラスとホバー色を配置しました。

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

次に、テンプレートでスタイルを使用しました。

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

あなたは必要ないかもしれません !important

— ウェブハウンド
ソース
0

あなたは様々なタイプのコードを書くことができます

最初にこれを書くことができます

html

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

CSS

.one{
  text-decoration: none;
}

別の方法を試すことができます

html

<a href="https://www.google.com/" class="one">Hello siraj</a>

CSS

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

jqueryでホバーすることもできます

Javaスクリプト

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

html

<p>Hover the mouse pointer over this paragraph.</p>

このコードでは、jqueryに3つの関数があり、最初にjqueryの関数の基本である関数を準備します。次に、テキストへのポインターをホバーすると、この関数にホバー関数があり、色が変わります。テキストへのポインターを離すと、色が異なり、これが3番目の関数になります。

— シラジ・アーメド
ソース
重複する回答を投稿しないでください
— Simas Joneliunas
ok sir simas-joneliunas
— Siraj Ahmed
これらのアプローチはどれも、質問で示された問題を解決しません。HTML形式の電子メールでJSを使用することはまったくできません。提案する他のアプローチでは、明示的に除外されたクラスを使用します。
— クエンティン
-1

私はjavascriptを避けなければなりませんでしたが、サーバー側のコードで行くことができました。

IDを生成し、スタイルブロックを作成し、そのIDのリンクを生成しました。はい、その有効なHTML。

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}
<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>
スニペットを展開

— バナナ酸
ソース
-2

疑似クラスa:hoverは、外部スタイルシートでのみ使用できます。したがって、外部スタイルシートを使用することをお勧めします。コードは次のとおりです。

a:hover {color:#FF00FF;}   /* Mouse-over link */
— ユーザー1466310
ソース
確かに、外部シートは必要ありませんstyle。タグを使用してください。
— Dmitri Zaitsev
-2

クラスを追加することでidを実行できますが、インライン化はできません。

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2行ですが、どこでもクラスを再利用できます。

— バグ
ソース
-3

私の問題は、ホバー時に別の画像と入れ替える必要がある多くの画像アイコンを使用するWebサイトを構築していることでした（たとえば、青っぽい画像はホバーすると赤っぽくなります）。私はこれのために次の解決策を作りました：

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

画像のペアを含むコンテナを紹介しました。1つ目は表示され、もう1つは非表示です（display：none）。コンテナーをホバーすると、最初のコンテナーが非表示になり（display：none）、2番目のコンテナーが再び表示されます（display：block）。

— ヨケム・グーセン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.