web-dev-qa-db-ja.com

HTMLタグ内でCSSホバーを使用する方法

私はこのようなことをしたいです：

<li style="hover:background-color:#006db9;">

しかし、それは機能しません。これは何らかの方法で可能ですか、またはヘッドまたは外部のcss-documentにcssを記述する必要がありますか？

htmlcss
14
Johan

これは、style属性を使用して行うことはできません。ドキュメント自体または外部ファイルでCSSを使用する必要があります。

li:hover { background-color:#006db9; }

それが選択肢でない場合は、JavaScriptを使用する必要があります。

7
Zack The Human

インラインスタイルでは不可能ですが、（有名な）有名なonmouseover/onmouseoutイベントハンドラでも同じことができます。

<li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor=''">

警告：ハイフンを含むCSS定義は、（css）background-color =（javascript）backgroundColorのように、キャメルケースを使用してJavaScriptに変換する必要があります。

20
Residuum

私の知る限り、これはJavaScriptなしではインラインで実行できません。すでに提案しているように、それをヘッドまたは外部スタイルシートに配置する必要があります。

本文の<style>タグも、私が知っているすべてのブラウザで解釈されますが、有効ではないためお勧めできません。

2
Pekka 웃

AFAIKインラインCSSでは擬似クラス（：hover、：activeなど）を使用できません。

0
Lucas

<li>、アンカータグにネストできます<a href="#" class="hoverable">次に、このスタイルをファイルの上部または外部CSSファイルに配置します。

a.hoverable:hover{background-color:#006db9}

または、JavaScriptを使用してアンカータグの使用を回避することもできます。

JQuery をお勧めします。

0
Isaac