CSS悬停在转换不起作用

Question

I am making navigation buttons for a portfolio website, hovering works perfectly but once the mouse hovers off, the button pops back to the original position instead of transitioning back slowly.

Here is the code:

 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

Just set your nav ul li a to position: relative; and it will work as expected.

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

You had the position:relative statement in the :hover rule whereas it should have been in the original state rule. Also, you had some repeated overlapping positional values.

 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

set nav ul li a to position: relative; like this:

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