web-dev-qa-db-ja.com

インラインCSSで：hoverを書くには？

私はインラインCSSコードを書かなければならないケースがあります、そして、私はアンカーにホバースタイルを適用したいです。

HTMLスタイル属性内のインラインCSSでa:hoverを使用する方法を教えてください。

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

htmlcssinline-styles
906
Amr Elgarhy

簡単に言うと、できません。

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

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

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

OPのコメントに対する返答：

CSSルールを動的に追加するための優れたスクリプトについては、JavascriptでCSSを完全にPwnするをご覧ください。このテーマに関する理論についてはスタイルシートの変更もご覧ください。

また、忘れないでください。それが選択肢である場合は、外部スタイルシートへのリンクを追加できます。例えば、

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

注意：上記は head セクションがあると仮定しています。 

497
Jonathan Fingland

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

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

また、私はthisがこの文脈で機能するかどうかを確信できません。 document.getElementById('idForLink')で切り替える必要があるかもしれません。

372
Alex S

あなたはそれをすることができた 過去のある時点で。しかし今では（同じ標準の最新版、候補勧告によると）それはできない。

48
Fahad Uddin

私はこれに非常に遅く貢献しています、しかし、私が誰かがこれを提案したのを見たのが残念でした。私はいくつかのホバーボタンのためにそれを必要としました、方法はこれです：

.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;"です。ホバーのスイッチ色は、あなたがそこに必要な色を入れて、そしてこの解決策はうまくいく。私はこれが互換性の点で完全な解決策ではないかもしれないことを認識しますが、これが絶対に必要な場合はうまくいきます。

32
lukesrw

javascriptを使う：

a）インラインスタイルを追加する 

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

b）または少し難しい方法 - "mouseover"を追加する

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',''); };

注：Javascriptの複数単語スタイル（つまり、font-size）はまとめて書かれています ：

element.style.fontSize="12px"

28
T.Todua

a:hoverはCSSのルールではなくセレクタの一部なので、あなたが説明しているとおりにはできません。スタイルシートには2つの要素があります。

selector {rules}

インラインスタイルには規則しかありません。セレクタは現在の要素であることを暗黙的に示しています。

セレクタは、XMLに似たドキュメントの要素を照合するための一連の基準を記述する表現言語です。

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

<html>
    <style>
    #uniqueid:hover {do:something;}
    </style>
    <a id="uniqueid">hello</a>
 </html>
25
Rex M

インライン疑似クラス宣言は、現在のCSSの反復ではサポートされていません（ただし、私が理解していることから、将来のバージョンで提供されるかもしれません）。

今のところ、おそらくあなたがスタイルしたいリンクのすぐ上にスタイルブロックを定義することです。

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
10
inkedmn

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

style="cursor: pointer;"
7
rutherford

これが最良のコード例です。

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

5
user1476842

あなたはこれを行うことができます。インラインスタイルではありません。 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
user9277191
<style>a:hover { }</style>
<a href="/">Go Home</a>

ホバーは疑似クラスなので、style属性と一緒には適用できません。これはセレクタの一部です。

4
Joel

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

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

4
m_vitaly

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

4
Vineel Shah

私はただ別の解決策を考え出しました。 

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

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

2
Liz

shadow に同意します。 JavaScriptを介して CSS を変更するには、onmouseoverおよびonmouseoutイベントを使用できます。 

そして、人々がJavaScriptを有効にする必要があるとは言わないでください。これはスタイルの問題だけなので、JavaScriptを使用していないビジターがいるかどうかは関係ありません;） Web 2.0 のほとんどはJavaScriptを使用します。例えば Facebook （たくさんのJavaScript）や Myspace を見てください。

1
Jaysn

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

0
BananaAcid

それで、これはユーザーが探していたものではありません、しかし、私はこの質問が答えを探しているのを見つけて、そしてある種の関連したものを思いつきました。私はそれらの中のタブのために新しい色/ホバーを必要とする繰り返しの要素の束を持っていました。私は自分のソリューションの鍵となるハンドルバーを使用していますが、他のテンプレート言語も使用できます。 

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

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

これはゲームのかなり遅い時期ですが、HTML EメールでJavaScriptを使用するのはいつですか。たとえば、私が現在働いている会社（Abodeeと一緒に韻を踏む）では、ほとんどのEメールマーケティングキャンペーンで最も一般的でない分母を使っています - そして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
Shawn Spencer