css 背景色转换未触发

0aydgbwb  于 2023-01-03  发布在  其他
关注(0)|答案(1)|浏览(166)

我正在尝试做一个背景颜色转换,元素A的颜色在鼠标悬停时会切换到另一种颜色,但是A的颜色在鼠标悬停时已经切换了。

.A
    {
        background-color: #1A1A1F;
    }
.A:hover
    {
        background-color: #424242;
        transition:  background-color,0.5s ;
        -o-transition: background-color, 0.5s ;
        -moz-transition:  background-color, 0.5s;
        -webkit-transition:  background-color, 0.5s;
         cursor: pointer;
    }

这里A的颜色默认为#1A1A1F,当你将鼠标悬停在上面时切换到#424242,但是它不是默认颜色,而是在没有悬停的情况下已经改变了。

yi0zb3m4

yi0zb3m41#

首先,你应该把主选择器中的过渡放在:hover选择器中,把过渡放在:hover中会给你一个不同的结果。
第二,过渡应定义如下:transition: background-color 0.5s;,中间没有逗号。当您有不同的转换时,应该使用逗号,例如:transition: background-color .5s, width 1s;.
如果您有多个过渡,并且您希望为它们提供相同的过渡持续时间,则可以使用all或不提供transition: all 1s;transition: 1s;等属性名称。
无论如何,您的代码应该如下所示:

.A{
    background-color:#1A1A1F;
    transition: background-color .5s;
}
.A:hover{
    background-color:#424242;
}

相关问题