質問: displayinlineで文字に合わせて背景色を指定したのですが、文字の脇の何もないところにマウスを重ねると、背景色が点滅するようになりました(白と背景色を高速で繰り返す)。 改善方法を教えてください。 ``` 絵画 彫刻 ``` css .moji { /*ulの中のliの文字色を変える*/ color: blue; } .moji:hover { background-color: #add8e6; display: inline; } ```
回答: 再現しました。 現象は、`.moji`を`:hover`のときのみ`display: inline`にしているので、 1. `div.moji`にhoverしていないとき → `div.moji`はブロック要素なので`display:block` → 横幅いっぱいまで要素がある 2. `div.moji`にhoverした瞬間 → `display:inline`になる → 横幅が文字のあるところまで縮まる → hover状態ではなくなる → 1に戻る という感じで高速でcssが切り替わり点滅している状態になるのだと思います。 以下のように、`.moji`を常に`display:inline`にすれば点滅しなくなります。 ``` .moji { color: blue; display: inline; } .moji:hover { background-color: #add8e6; } ```