Weird hover glitch CSS

Question

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

^ a link to my codepen, when you hover over the batter stroke (whitepart) theres no glitch but once you hover over the inner part it gets a little wacky. I can't figure out how to make this smooth. Please help if you can thanks! :D

-Alex

Answer 1

I think that your issue here is that when you are hovering on the inner part, once the width of .innerpre reaches your cursor, you are then hovering over .innerpre not .inner.

Just change your last selector to include .innerpre:hover

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