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 a到position: 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聲明，而這應該是我n原始狀態規則。此外，你有一些重複的重疊位置值。

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

設置nav ul li a到position: relative;這樣的：

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; 
}