cssのマウスホバーが効かなくてプチハマリしたので解決方法をメモしておきます。
cssのマウスホバーが効かないときに確認すること
結論からいってしまうと要素が重なっていたのでホバーが効いていませんでした。こちらの件あらゆるケースが考えられるとは思うのですが私の場合は要素の特定の部分はホバーが効くのだけども、それ以外の部分はなぜかホバーが効かない状態になっていました。このようなケースの場合はまず間違いなく要素の重なりが原因かと思います。
とりあえず、ホバーが効いてないときに確認することとしては、ブラウザの要素の検証でひとつひとつ要素を確認していくことでしょうか？もちろん自分が記述したコードにミスがないことが前提にはなりますが。
ということで、ホバーがうまくいかないときは該当のリンク要素なりに以下のコードを足してみてください。※z-indexの値はとりあえず1にしてますが、環境によってこの値をかえる必要があります。
z-index: 1;
他にホバーが効かない事例がないか調べてみた
ホバーが効かない件もう解決したので個人的にはもう済んだはなしなのですが、せっかく記事にしていたので他に事例がないか調べてみました。
擬似クラスの記述順ミス
リンクにつける擬似クラスの記述順をミスしていると、意図しない挙動になることがあるようです。擬似クラスの記述順は以下のようになっている必要があるようです。
- :link
- :visited
- :hover
- :active
こちらの記述順、あまり気にしたことはないですが、トラブルシュートの候補として頭のかたすみにおいてもいいのかなと思います。
:が多い。セミコロン忘れ
::beforeとか::afterだったらコロンは２つでもよいのだけれども、:hoverの場合だとコロンはひとつなんですよね。・・・こちらはまずミスらないんじゃないかなと思うんですが、ど忘れすることもあるかもしれないので、こちらも頭のかたすみに・・なんですが、それを忘れてしまうかもしれませんけど。
cssのセミコロンは最後の部分はなくても動作するのですが、それ以外で記述忘れがあった場合、ホバーが効かなくなっているかと思います。上記も含めたうっかり系のミスはその都度修正すればよいのでは？と思います。
まとめ
要素の重なりでホバーが効かない件は結構よくあることなのでは？と思って検索をかけてみましたが、やはり同じような問題は結構おきているようです。ですので、ホバーが効かないときはとりあえず「重なり」をチェックする方向でよいのではないでしょうか？
この記事の情報は以上になります。
コメント