CSSホバーオフ遷移が動作しない

Question

ポートフォリオウェブサイトのナビゲーションボタンを作成していますが、ホバリングは完全に機能しますが、マウスを一度動かすと、ゆっくりと元の位置に戻ります。

li { 
 
    list-style-type: none; 
 
    margin: 20px 5px 0px 5px; 
 
} 
 
nav ul li a { 
 
    display: block; 
 
    margin: 30px 10px; 
 
    text-decoration: none !important; 
 
    text-align: center; 
 
    width: 90px; 
 
    padding: 6px 0; 
 
    border-radius: 4px; 
 
    -o-transition: all 300ms ease-in-out; 
 
    -ms-transition: all 300ms ease-in-out; 
 
    -webkit-transition: all 300ms ease-in-out; 
 
    -moz-transition: all 300ms ease-in-out; 
 
    transition: all 300ms ease-in-out; 
 
    background: #E6E5CC; 
 
    float: right; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
nav ul li a:hover { 
 
    color: inherit; 
 
    position: relative; 
 
    top: 0px; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0px; 
 
    top: -5px; 
 
    left: -5px; 
 
    box-shadow: 1px 1px 0px #e3e2c5, 2px 2px 0px #dfdebe, 3px 3px 0px #cbc995, 4px 4px 0px #b4b165, 5px 5px 0px #56542a; 
 
    background: #f7f6ee; 
 
} 
 
nav ul li a:active { 
 
    color: inherit; 
 
    top: 5px; 
 
    left: 5px; 
 
    box-shadow: 0px 0px 5px white; 
 
}

<nav> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Contact</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Projects</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Blog</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">About</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

ちょうどあなたのnav ul li aposition: relative;に設定し、期待どおりに動作します：ここで

はコードです。

CSS

nav ul li a { 
    position: relative; 
} 

li { 
 
    list-style-type: none; 
 
    margin: 20px 5px 0px 5px; 
 
} 
 
nav ul li a { 
 
    display: block; 
 
    margin: 30px 10px; 
 
    text-decoration: none !important; 
 
    text-align: center; 
 
    width: 90px; 
 
    padding: 6px 0; 
 
    border-radius: 4px; 
 
    -o-transition: all 300ms ease-in-out; 
 
    -ms-transition: all 300ms ease-in-out; 
 
    -webkit-transition: all 300ms ease-in-out; 
 
    -moz-transition: all 300ms ease-in-out; 
 
    transition: all 300ms ease-in-out; 
 
    background: #E6E5CC; 
 
    float: right; 
 
    top: 0px; 
 
    left: 0px; 
 
    position: relative; 
 
} 
 
nav ul li a:hover { 
 
    color: inherit; 
 
    position: relative; 
 
    top: 0px; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0px; 
 
    top: -5px; 
 
    left: -5px; 
 
    box-shadow: 1px 1px 0px #e3e2c5, 2px 2px 0px #dfdebe, 3px 3px 0px #cbc995, 4px 4px 0px #b4b165, 5px 5px 0px #56542a; 
 
    background: #f7f6ee; 
 
} 
 
nav ul li a:active { 
 
    color: inherit; 
 
    top: 5px; 
 
    left: 5px; 
 
    box-shadow: 0px 0px 5px white; 
 
}

<nav> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Contact</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Projects</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Blog</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">About</a> 
 
    </li> 
 
    </ul> 
 
</nav>

JSFiddle

Answer 2

それは私されているはずのに対し、あなたは:hoverルールでposition:relative文を持っていました元の状態ルール。また、重複した位置の値が繰り返し表示されました。

li { 
 
    list-style-type: none; 
 
    margin: 20px 5px 0px 5px; 
 
} 
 
nav ul li a { 
 
    display: block; 
 
    margin: 30px 10px; 
 
    text-decoration: none !important; 
 
    text-align: center; 
 
    width: 90px; 
 
    padding: 6px 0; 
 
    border-radius: 4px; 
 
    -o-transition: all 300ms ease-in-out; 
 
    -ms-transition: all 300ms ease-in-out; 
 
    -webkit-transition: all 300ms ease-in-out; 
 
    -moz-transition: all 300ms ease-in-out; 
 
    transition: all 300ms ease-in-out; 
 
    background: #E6E5CC; 
 
    float: right; 
 
    position: relative; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
nav ul li a:hover { 
 
    color: inherit; 
 
    top: -5px; 
 
    left: -5px; 
 
    box-shadow: 1px 1px 0px #e3e2c5, 2px 2px 0px #dfdebe, 3px 3px 0px #cbc995, 4px 4px 0px #b4b165, 5px 5px 0px #56542a; 
 
    background: #f7f6ee; 
 
} 
 
nav ul li a:active { 
 
    color: inherit; 
 
    top: 5px; 
 
    left: 5px; 
 
    box-shadow: 0px 0px 5px white; 
 
}

<nav> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Contact</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Projects</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Blog</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">About</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 3

このようposition: relative;にnav ul li aを設定します。

nav ul li a { 
    display: block; 
    margin: 30px 10px; 
    text-decoration: none !important; 
    text-align: center; 
    width: 90px; 
    padding: 6px 0; 
    border-radius: 4px; 
    -o-transition: all 300ms ease-in-out; 
    -ms-transition: all 300ms ease-in-out; 
    -webkit-transition: all 300ms ease-in-out; 
    -moz-transition: all 300ms ease-in-out; 
    transition: all 300ms ease-in-out; 
    background: #E6E5CC; 
    float: right; 
    top: 0px; 
    left: 0px; 
    position: relative; 
}