JavaScriptにて擬似クラスのスタイル変更


CSSにて.test:hover{}の形式でフォントカラーなどを設定しているのですが、それをJavaScriptにて動的に変更したいのですが可能でしょうか?
通常のCSSスタイルはobject.style.スタイル = valueで変更できますが、上記の:hoverのスタイルを変更したいと思っています。
宜しくお願いいたします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2006/07/22 22:06:29
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:znz No.2

回答回数193ベストアンサー獲得回数25

ポイント40pt

hoverを直接変更するのではなく、onmouseoverとonmouseoutでhoverのように色を変更するというのはどうでしょうか?

Firefox 1.5.0.4で試してみたところ、:hoverの設定より優先されるようです。

<html>
<head>
<title>test</title>
<style type="text/css">
p:hover { color: red }
</style>
</head>
<body>
<p onmouseover="prev_color = this.style.color;
    this.style.color = document.getElementById('hovercolor').value"
   onmouseout="this.style.color = prev_color">hoge</p>
<input type="text" value="blue" id="hovercolor">
</body>
</html>
id:istreet

ご回答ありがとうございます。

スマートではないですが、通常の文字色はobj.style.colorで、hoverに代わる部分はonmouseoverで対処する事にしました。

大変参考になりました。有難うございました。

2006/07/22 22:04:52

その他の回答1件)

id:ito-yu No.1

回答回数323ベストアンサー獲得回数14

ポイント30pt

直接、そのやり方では無いのですが。

javascriptでスタイルを書き換えるときは、複数のクラスを定義しておいて、イベントに応じてクラスを書き換えてやる方法が良いと思います。

質問の例ですと、:hoverだけが違う2種類のクラスを定義しておきます。

.test:hover{}

.test2:hover{}

で、object.className='test2';としてやることで、スタイルが変化します。

この方法をご存じで、今回は使えないということであればポイントは不要です。

id:istreet

ご回答ありがとうございます。

説明不足で申し訳ございません。

クラスを変更する方法も良いのですが、

今回は、ユーザーに色コードを手入力させ、

それに応じてhoverを変えたいので

この方法は難しいのですが、何か方法がないか

色々と探していますが解決策が見つかっていません。

2006/07/22 19:09:28
id:znz No.2

回答回数193ベストアンサー獲得回数25ここでベストアンサー

ポイント40pt

hoverを直接変更するのではなく、onmouseoverとonmouseoutでhoverのように色を変更するというのはどうでしょうか?

Firefox 1.5.0.4で試してみたところ、:hoverの設定より優先されるようです。

<html>
<head>
<title>test</title>
<style type="text/css">
p:hover { color: red }
</style>
</head>
<body>
<p onmouseover="prev_color = this.style.color;
    this.style.color = document.getElementById('hovercolor').value"
   onmouseout="this.style.color = prev_color">hoge</p>
<input type="text" value="blue" id="hovercolor">
</body>
</html>
id:istreet

ご回答ありがとうございます。

スマートではないですが、通常の文字色はobj.style.colorで、hoverに代わる部分はonmouseoverで対処する事にしました。

大変参考になりました。有難うございました。

2006/07/22 22:04:52

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません