Question

我试图在元素的背景上执行简单的悬停效果，但是当光标位于元素上时，在完成背景上的整个过渡之前，背景会闪烁片刻，然后停止闪烁。

div.nav {float:left;}
div.nav ul{list-style-type: none;
           margin: 0;
           padding: 0;
           width: 180px;}
div.nav ul li{border:1px solid #EAEAEA;}
div.nav ul li a {display:inline-block;
                 color: black;
                 width:180px;
                 margin:0 auto;
                 padding:50px 0;
                 text-decoration: none;
                 text-align:center;
                 text-transform:uppercase;
                 box-shadow: inset 0 0 0 0 gold;
		         -webkit-transition: linear 1s;
                 -moz-transition: linear 1s;
                 transition: linear 1s;
		         cursor:pointer;}
div.nav ul li a:hover{  box-shadow: inset 400px 0 0 0 gold;}
div.nav ul li a i{display:block;
                 margin-bottom:5px;}

 <div class="nav">
       <ul>
	     <li><a href="#"> <i class="fa fa-user"></i>About Me</a></li>
		 <li><a href="#"><i class="fa fa-briefcase"></i>Resume</a></li>
		 <li><a href="#"><i class="fa fa-camera"></i>Portfolio</a></li>
		 <li><a href="#"><i class="fa fa-phone"></i>Contact</a></li>
	   </ul>
   </div>

我试图找到闪烁的原因，但是改变了填充和宽度，但是找不到。

Answer 1

    div.nav {float:left;}
    div.nav ul{list-style-type: none;
               margin: 0;
               padding: 0;
               width: 180px;}
    div.nav ul li{border:1px solid #EAEAEA;}
    div.nav ul li a {display:inline-block;
                     position:relative;
                     z-index:2;
                     color: black;
                     width:180px;
                     margin:0 auto;
                     padding:50px 0;
                     text-decoration: none;
                     text-align:center;
                     text-transform:uppercase;
    		         -webkit-transition: ease 1s;
                     -moz-transition: all ease 1s;
                     transition: all ease 1s;
    		         cursor:pointer;}

    div.nav ul li a:after{ 
                     content:"";
                     z-index:-1;
                     width: 0%;
                     height: 100%;
	                   background-color: gold;
                     position: absolute;
                     top:0;
                     left:0;
                     right:0;
                     bottom:0;
                     transition: all .5s ease-out;
                     }
		   
    div.nav ul li a:hover:after{ width:100%;}

 <div class="nav">
       <ul>
	     <li><a href="#"> <i class="fa fa-user"></i>About Me</a></li>
		 <li><a href="#"><i class="fa fa-briefcase"></i>Resume</a></li>
		 <li><a href="#"><i class="fa fa-camera"></i>Portfolio</a></li>
		 <li><a href="#"><i class="fa fa-phone"></i>Contact</a></li>
	   </ul>
   </div>

尝试此操作..仅使用：before而不是box-shadow

Answer 2

我认为这可能会有所帮助：Sliding Background Effect

但是，我希望这会有所帮助：

div.nav {
  float: left;
}

div.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 180px;
}

div.nav ul li {
  border: 1px solid #EAEAEA;
}

div.nav ul li a {
  display: inline-block;
  color: black;
  width: 180px;
  margin: 0 auto;
  padding: 50px 0;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  background-image: linear-gradient(to right, gold, gold 50%, transparent 50%, transparent);
  background-position: 100% 0;
  background-size: 200% 100%;
  transition: all .5s ease-out;
}

div.nav ul li a:hover {
  background-position: 0 0;
}

div.nav ul li a i {
  display: block;
  margin-bottom: 5px;
}

<div class="nav">
  <ul>
    <li>
      <a href="#"> <i class="fa fa-user"></i>About Me</a>
    </li>
    <li><a href="#"><i class="fa fa-briefcase"></i>Resume</a></li>
    <li><a href="#"><i class="fa fa-camera"></i>Portfolio</a></li>
    <li><a href="#"><i class="fa fa-phone"></i>Contact</a></li>
  </ul>
</div>

Answer 3

不要使用盒形阴影，而是使用:before创建一个绝对定位的伪元素，然后可以对其进行动画处理

div.nav {
  float:left;
}
div.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 180px;
}
div.nav ul li {
  border:1px solid #EAEAEA;
}
div.nav ul li a {
  display:inline-block;
  color: black;
  width:180px;
  margin:0 auto;
  padding:50px 0;
  text-decoration: none;
  text-align:center;
  text-transform:uppercase;
  /*box-shadow: inset 0 0 0 0 gold;*/
  cursor:pointer;
  position: relative;
}
div.nav ul li a:before {
  content: '';
  position: absolute;
  z-index: -1;
  background: gold;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 0;
  -webkit-transition: .5s ease-in;
  -moz-transition: .5s ease-in;
  transition: .5s ease-in;
  
}
div.nav ul li a:hover:before {
  right: 0;
  -webkit-transition: .5s ease-out;
  -moz-transition: .5s ease-out;
  transition: .5s ease-out;
}
div.nav ul li a i {
  display:block;
  margin-bottom:5px;
}

<div class="nav">
       <ul>
	     <li><a href="#"> <i class="fa fa-user"></i>About Me</a></li>
		 <li><a href="#"><i class="fa fa-briefcase"></i>Resume</a></li>
		 <li><a href="#"><i class="fa fa-camera"></i>Portfolio</a></li>
		 <li><a href="#"><i class="fa fa-phone"></i>Contact</a></li>
	   </ul>
   </div>

使用CSS悬停效果闪烁

3 个答案: