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>

Answer 2

您不需要渐变，请查看此示例：

修改：现在使用文字。

＆＃13;

    .button {
        position: relative;
        width: 100%;
        height: 100%;
        top: 0;
        z-index: -1;
        transform: skewX(30deg);
    }

    .button::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50%;
        background-color: rgba(63, 142, 191,1);
    }

    .button::before {
        content: "";
        position: absolute;
        top: 0;
        width: 100%;
        height: 50%;
        background-color: rgba(63, 142, 191,1);
        transition: all .7s;
    }

    .wrapper:hover .button:before {
        background-color: rgba(63, 142, 191, .5);
    }

    a {
        text-align: center;
        width: 100%;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        position: absolute;
        margin: 0;   
        display:flex;
        justify-content: center;
        align-items: center;

    }

    .wrapper {
        position: absolute;
        width: 200px;
        height: 80px;
        z-index: 9;
        left: 0;
        right: 0;
        margin: auto;
    }

＆＃13;

<div class="wrapper">

    <a href="#">Text</a>

    <div class="button">
    </div>

</div>

＆＃13;

Answer 3

要在悬停时更改颜色，您可以尝试这样

a{
    transition-duration: 0.8s;
    transition-delay: 0.5s;
    transition-property: color;
}

首先，在“a”标签中定义这些代码，然后给出悬停效果 transition-property定义了您想要动画或移动的属性。

Div背景色，慢慢改变

3 个答案: