文字の脇にカーソルを重ねると文字の背景色が点滅する

Question

displayinlineで文字に合わせて背景色を指定したのですが、文字の脇の何もないところにマウスを重ねると、背景色が点滅するようになりました(白と背景色を高速で繰り返す)。
改善方法を教えてください。

<ul style="list-style-type:circle">
<li><div class="moji"><a href="">絵画</a></div>
<li><div class="moji"><a href="">彫刻</a></div>
</ul>
```css
.moji {
  /*ulの中のliの文字色を変える*/
  color: blue;
}

.moji:hover {
    background-color: #add8e6;
    display: inline;
    }

Answer 1

再現しました。
https://jsfiddle.net/zjL4ospv/2/

現象は、.mojiを:hoverのときのみdisplay: inlineにしているので、

1. div.mojiにhoverしていないとき

→ div.mojiはブロック要素なのでdisplay:block
→ 横幅いっぱいまで要素がある

1. div.mojiにhoverした瞬間

→ display:inlineになる
→ 横幅が文字のあるところまで縮まる
→ hover状態ではなくなる
→ 1に戻る

という感じで高速でcssが切り替わり点滅している状態になるのだと思います。
以下のように、.mojiを常にdisplay:inlineにすれば点滅しなくなります。

https://jsfiddle.net/zjL4ospv/1/

.moji {
  color: blue;
  display: inline;
}

.moji:hover {
  background-color: #add8e6;
}