1209

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

a:hoverHTMLスタイル属性内のインラインCSSでどのように使用できますか？

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

4

26 に答える 26

669

簡単な答え：できません。

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

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

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

OPのコメントへの回答：

CSSルールを動的に追加するための優れたスクリプトについては、Javascriptを使用したTotallyPwnCSSを参照してください。この主題に関する理論のいくつかについては、スタイルシートの変更も参照してください。

また、オプションである場合は、外部スタイルシートへのリンクを追加できることを忘れないでください。例えば、

<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>

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

于 2009-06-23T15:09:04.513 に答える
561

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

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>

thisまた、このコンテキストで機能するかどうかはわかりません。で切り替える必要があるかもしれませんdocument.getElementById('idForLink')。

于 2009-06-23T15:16:17.133 に答える
59

過去のある時点でそれを行うことができました。しかし、現在 (同じ標準の最新版 (勧告候補) によると)、できません。

于 2012-03-27T05:59:30.967 に答える
44

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

selector {rules}

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

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

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

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>
于 2009-06-23T15:10:13.433 に答える
39

私はこれに貢献するのが非常に遅くなりましたが、実際にインラインコードが必要な場合は、これを行うことができます。いくつかのホバーボタンに必要でした。方法は次のとおりです。

.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;" ホバー時のスイッチの色です。そこに必要な色を入れると、このソリューションが機能します。これは互換性の点で完璧な解決策ではないかもしれませんが、絶対に必要な場合は機能します。

于 2015-08-10T09:41:09.420 に答える
32

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"

于 2013-07-22T08:33:46.317 に答える
12

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

今のところ、最善の策は、スタイルを設定するリンクのすぐ上にスタイルブロックを定義することです。

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
于 2009-06-23T15:11:18.877 に答える
9

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

style="cursor: pointer;"
于 2013-05-01T12:58:35.460 に答える
8 
<style>a:hover { }</style>
<a href="/">Go Home</a>

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

于 2009-06-23T15:10:57.380 に答える
5

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

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

于 2009-06-23T15:11:38.110 に答える
5

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

于 2009-06-23T15:13:54.317 に答える
4

私はちょうど別の解決策を考え出しました。

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

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

于 2011-09-08T16:57:22.413 に答える
1

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

また、JavaScript を有効にする必要があるとは言わないでください。これは単なるスタイルの問題なので、JavaScript を使用していない訪問者がいても問題ありません ;) ただし、Web 2.0のほとんどはJavaScript で動作します。例としてFacebook (多くの JavaScript) またはMyspaceを参照してください。

于 2010-03-26T10:22:11.357 に答える
1

これはゲームのかなり遅い段階ですが、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.

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

于 2017-12-12T21:13:11.857 に答える
-3

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

a:hover {color:#FF00FF;}   /* Mouse-over link */
于 2012-06-19T12:18:39.250 に答える
-3

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

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

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

于 2014-08-04T19:47:27.657 に答える
-4

私の問題は、ホバー時に別の画像と交換する必要がある多くの画像アイコンを使用する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)。

于 2016-08-29T19:05:09.900 に答える