Question

.box {
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: background-color 0.3 ease-out;
  -moz-transition: background-color 0.3s ease-out;
  -o-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;
      opacity:0.2;
}

.box:hover {
  cursor: pointer;
  opacity:1;
}

我尝试使用不透明度进行转换，它不起作用，但如果我执行背景更改效果，它可以工作。

demo http://jsfiddle.net/rsg4e/

Answer 1

你走在正确的轨道上 - 只是走错了路。

Fixed your fiddle

你想要的是改变不透明度的背景颜色，而不是完整的元素以及它内部的任何内容。您需要做的就是将背景设置为rgba()值，然后重新设置。

.box {

  background-color: rgba(255,0,0,0.2);

}
.box:hover {

  background-color: rgba(255,0,0,1);

}

当然 - 如果你实际上也希望其中的所有内容都改变不透明度，那么请使用其他一个答案 - 它们就是它的头部。

Answer 2

你应该在背景颜色上设置转换，当你应该在不透明度上调用它时，即：

-webkit-transition: opacity 0.3s ease-out;

Answer 3

由于您已将其指定为background-color，因此无法转换background属性。所以转型自然不会奏效。

将其更改为：

-webkit-transition: background 0.3 ease-out;
  -moz-transition: background 0.3s ease-out;
  -o-transition: background 0.3s ease-out;
  transition: background 0.3s ease-out;

或

-webkit-transition: all 0.3 ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

并将您的悬停状态转换为

.box:hover { background: /*younewcolor*/;}

一切都应该正常。

Answer 4

写

transition: opacity 0.3 ease-out;

而不是

transition: background-color 0.3 ease-out;

因为在悬停时您正在更改opacity而不是background。

.box {
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: opacity 0.3 ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
      opacity:0.2;
}

DEMO

为什么这个css过渡不起作用

4 个答案:

Fixed your fiddle