CSSにて.test:hover{}の形式でフォントカラーなどを設定しているのですが、それをJavaScriptにて動的に変更したいのですが可能でしょうか?
通常のCSSスタイルはobject.style.スタイル = valueで変更できますが、上記の:hoverのスタイルを変更したいと思っています。
宜しくお願いいたします。
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>
直接、そのやり方では無いのですが。
javascriptでスタイルを書き換えるときは、複数のクラスを定義しておいて、イベントに応じてクラスを書き換えてやる方法が良いと思います。
質問の例ですと、:hoverだけが違う2種類のクラスを定義しておきます。
.test:hover{}
.test2:hover{}
で、object.className='test2';としてやることで、スタイルが変化します。
この方法をご存じで、今回は使えないということであればポイントは不要です。
ご回答ありがとうございます。
説明不足で申し訳ございません。
クラスを変更する方法も良いのですが、
今回は、ユーザーに色コードを手入力させ、
それに応じてhoverを変えたいので
この方法は難しいのですが、何か方法がないか
色々と探していますが解決策が見つかっていません。
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で対処する事にしました。
大変参考になりました。有難うございました。
ご回答ありがとうございます。
スマートではないですが、通常の文字色はobj.style.colorで、hoverに代わる部分はonmouseoverで対処する事にしました。
大変参考になりました。有難うございました。