この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
業務でWebページをいじったときに地味にハマったので備忘録として投稿します。
経緯
ボタンをCSS側の設定でデザインして作るのではなく、画像ファイルを使って実装したい。
…ということであれこれ検索しながらCSSでマウスオーバー時に画像を切り替えようと思い
<body>
<style>
.button{
background: url(/images/sampleA.png) left top no-repeat;
}
.button:hover{
background: url(/images/sampleB.png) left top no-repeat;
}
</style>
<img class="button" alt="" onclick="func()" />
</body>
関係ない箇所は全て省略しましたが、こんな感じでコードを書いてみました。
ページに飛んで試しにマウスオーバー…無事反応して出来た。と思ったのもつかの間、一度ボタンをクリックしたらその後クリックは効くものの、マウスオーバーしても全く効かなくなってしまった。
原因
特定条件下でボタンが効かないように処理を加えたりしなければならず、JavaScript側でボタン押下時の処理をしていたのでそれに加える形で
<script>
function func(){
//
// ボタン押下時の処理
//
button.style.display="none";
}
</script>
こんな風にJavaScriptから表示非表示を切り替える処理を加えたり、CSSの設定を変更しているのが原因だったようです。
CSSには優先度というものがあり、JavaScriptでCSSの設定を上書きしてしまうとJavaScript側の設定が最優先されてしまい、CSSでの再設定もJavaScriptでの設定が優先されてしまい、何も変化しなくなってしまっていたようです。
対処
CSS側で下のように、末尾に「! important」と加えるだけで問題なく動作しました。
<style>
.button:hover{
background: url(/images/sampleB.png) left top no-repeat ! important;
}
</style>
この「! important」はこれを優先してください！というような命令なのでJavaScriptで変更した設定も変更することが可能になるそうです。
最後に
そもそもクリック時の処理をJavaScript側だけで済ませてしまおうと横着せずにCSSでcheckedとか使って処理すればハマることもなかったと思います…が、一つ勉強になりました。(おそらく結構初歩的なことだと思いますが)
今回はCSS内での優先度によるものでなかったのと、知識不足な今の私にはいまいち理解しきれなかったので今回はこれで終わりますが、どうやら「! important」を使わないクールな書き方もあるそうなので、もしマスターした時にはそちらも紹介しようと思います。
