解決させたいことは、paddingを付けるとマウスオーバー時にテキストが一瞬ずれてしまいます。
どうしても、padding-topとpadding-bottomが必要なのですが、最初のずれの対処方法はありますでしょうか。
.menu-item-listでhiddenにしている要素にvisibleにさせたときにpaddingなしの時はずれは起こりません。
.menu-item-list { line-height: 30px; opacity: 0; top: 50%; right: 0; left: 0; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 16px; visibility: hidden; -webkit-transition: opacity,visibility, .75s ease-in-out; transition: opacity,visibility, .75s ease-in-out; padding: 8% 0; } .menu-area-inner:hover .menu-item-list { opacity: 1; visibility:visible; background: rgba(245,247,250,.75); padding: 8% 0; }
ずれが起こる環境と「ずれ」のスクリーンショットなど追記可能でしょうか。
mac os 10.8
chrome ver.49になります。
safari ver.9でも同じ現象です。
回答1件
あなたの回答
tips
プレビュー