css - 奇妙なホバー グリッチ CSS

Question

http://codepen.io/alcoven/pen/KvJae

^ 私の codepen へのリンクです。バッター ストローク (白い部分) にカーソルを合わせると問題はありませんが、内側の部分にカーソルを合わせると、少し奇妙になります。これをスムーズにする方法がわかりません。できれば助けてくださいありがとう！:D

-アレックス

Answer 1

ここでの問題は、内側の部分にカーソルを合わせているときに、.innerpre の幅がカーソルに達すると、.inner ではなく .innerpre にカーソルを合わせていることだと思います。

最後のセレクターを変更して .innerpre:hover を含めるだけです

.inner:hover + .innerpre,
.innerpre:hover {
    width: 224px;
    margin: 117px 0px 0px 153px;
    -webkit-transition: all 1s;
    transition: all 1s;
}