Question

我正在尝试在悬停时创建两种不同背景色的过渡。

我寻找了不同的解决方案，但是到目前为止，没有一个解决方案。我还尝试使用-webkit-transition和transition，但到目前为止都没有用。

a {
  color: inherit;
  text-decoration: none;
  background-color: #ffdc73; /* hsl(200, 100%, 80% */
  box-shadow:
    0 7px 30px -10px #ffdc73, /* This one should usually be only box-shadow but I made it two so it would be more visable */
    0 7px 30px -10px #ffdc73;
  transition: box-shadow 0.3s ease-in-out;
}

a:hover,
a:focus {
  outline: none;
  background-color: #282936;
  color: #fff;
  box-shadow:
    0 7px 30px -10px #282936, /* rgba(154,160,185,0.05) */
    0 7px 30px -10px #282936; /* rgba(166,173,201,0.2) */
  transition: box-shadow 0.3s ease-in-out;
}

<a href="#"> Buttton </a>

Answer 1

请注意：

转换是在实际块而不是事件块中定义的。

e，g a{here...}和a:hover{not here...}

下面是样式对象的background-color和box-shadow属性的过渡。

a {
  color: inherit;
  text-decoration: none;
  background-color: #ffdc73; /* hsl(200, 100%, 80% */
  box-shadow:
    0 7px 30px -10px #ffdc73, /* This one should usually be only box-shadow but I made it two so it would be more visable */
    0 7px 30px -10px #ffdc73;
  transition: 0.3s ease-in-out;
  
  transition-property: box-shadow, background-color;
}

a:hover,
a:focus {
  outline: none;
  background-color: #282936;
  color: #fff;
  box-shadow:
    0 7px 30px 10px #282936, /* rgba(154,160,185,0.05) */
    0 7px 30px 10px #282936; /* rgba(166,173,201,0.2) */
}

<a>Check this out</a>

Answer 2

box-shadow应该应用于:hover，而transition应该应用于根元素：

a {
  color: inherit;
  text-decoration: none;
  background-color: #ffdc73;
  transition: box-shadow 0.3s ease-in-out;
}

a:hover,
a:focus {
  outline: none;
  background-color: #282936;
  color: #fff;
  box-shadow: 0 7px 30px -10px #282936, 0 7px 30px -10px #282936;
}

<a href="#">Hover over me</a>

Answer 3

如果要创建background-color过渡，请以box-shadow样式将a更改为background-color

a {
  color: inherit;
  text-decoration: none;
  background-color: #ffdc73; /* hsl(200, 100%, 80% */
  box-shadow:
    0 7px 30px -10px #ffdc73, /* This one should usually be only box-shadow but I made it two so it would be more visable */
    0 7px 30px -10px #ffdc73;
  transition: background-color 0.3s ease-in-out; /* Change transition-property from box-shadow to background-color */
}

a:hover,
a:focus {
  outline: none;
  background-color: #282936;
  color: #fff;
  box-shadow:
    0 7px 30px -10px #282936, /* rgba(154,160,185,0.05) */
    0 7px 30px -10px #282936; /* rgba(166,173,201,0.2) */
}

Answer 4

如果要过渡的背景色，则需要在过渡中包括该属性。

a {
  color: inherit;
  text-decoration: none;
  background-color: #ffdc73; /* hsl(200, 100%, 80% */
  box-shadow:
    0 7px 30px -10px #ffdc73, /* This one should usually be only box-shadow but I made it two so it would be more visable */
    0 7px 30px -10px #ffdc73;
  transition: 
    background-color 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

a:hover,
a:focus {
  outline: none;
  background-color: #282936;
  color: #fff;
  box-shadow:
    0 7px 30px -10px #282936, /* rgba(154,160,185,0.05) */
    0 7px 30px -10px #282936; /* rgba(166,173,201,0.2) */
  transition: 
   background-color 0.3s ease-in-out,
   box-shadow 0.3s ease-in-out;
}

https://next.plnkr.co/edit/Udj72JIVEIQdQUbR

无法过渡背景色

4 个答案: