0
現在、ホバー効果を働かせようとしていますが、ホバーとフォーカス状態をinspect要素で見つけることができないので、今どこにいても間違っていると思われます。また、私はオートプレフィクサーを実行しています。ホバリングとフォーカスが動作しない
CSS
.nav-wrapper {
display: flex;
padding: 12px 10px 10px;
flex-flow: column;
}
.nav-wrapper a {
margin-top: 30px;
font-size: 18px;
color: rgba(0, 0, 0, 0.2);
font-weight: 700;
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}
.nav-wrapper a::before {
color: green;
content: attr(data-hover);
position: absolute;
transition: transform 0.7s, opacity 0.7s;
}
.nav-wrapper a::before:hover, .nav-wrapper a::before:focus {
transform: scale(0.9);
opacity: 0;
}
HTML
<nav class="nav-wrapper">
<a class="nav-child" data-hover="About Me" href="#">About Me</a>
<a class="nav-child" data-hover="Work" href="#">Work</a>
<a class="nav-child" data-hover="Process" href="#">Process</a >
<a class="nav-child" data-hover="Contact Me" href="#">Contact Me</a>
</nav>
重複をXDする前に他の誰かがいた見http://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter – cimmanon