人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: istreet
●カテゴリ:ウェブ制作
✍キーワード::hover CSS JavaScript object test
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● ito-yu
●30ポイント

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

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

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

.test:hover{}

.test2:hover{}

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

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

◎質問者からの返答

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

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

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

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

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

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

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


2 ● znz
●40ポイント ベストアンサー

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>
◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ