search

mx3m / hikari-for-jekyll

An open-source theme for Jekyll
http://mx3m.github.io/hikari-for-jekyll
MIT License
235 stars 86 forks source link

Three lines button hover animation issue on touch screens #7

Closed mx3m closed 10 years ago

mx3m commented 10 years ago

Although could probably be better, I really like the animation of the three lines icon on top right...

That said, the button animation is not resetting on touch screens after I click on it... It remains as one line instead of three.

I need to find a way to fix that. Any suggestion?

ssorallen commented 10 years ago

You can simulate the problem in a desktop browser. Because of the way the header collapses, the header collapses but the button doesn't receive a mouseout if you keep your mouse still.

The header .h-wrap .menu-icon:hover .lines:before and header .h-wrap .menu-icon:hover .lines:after class still apply because the hover hasn't ended. I tried calling blur on the element, but that doesn't end the hover; you need a mouseout. You might be able to manually trigger a mouseout to remove the hover effect.