html - div 背景颜色，悬停时缓慢变化

Question

我试图在鼠标悬停时更改 div 的背景颜色。我想让背景像 this spnashot

我在悬停时使用此代码。我还想当鼠标悬停时颜色会慢慢变化

.header_col a:hover{
  background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
  color: white!important;
}

Answer 1

希望这段代码能工作

.header_col li {
  display:inline-block;
  transition: background 0.2s;
  transform: skew(20deg);  /* SKEW */

}
.header_col li a {
  display:block;
  text-decoration:none;
  color: black!important;
  transform: skew(-20deg); /* INVERSE SKEW */

}
.header_col li:hover{
  background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
  color: white!important;
}
.header_col li a:hover{
   color: white!important;
}

<ul class="header_col">
	<li><a href="#">Page 1</a></li>
	<li><a href="#">Page 2</a></li> 
	<li><a href="#">Page 3</a></li> 
	<li><a href="#">Page 4</a></li>
	<li><a href="#">Page 5</a></li>
</ul>