為什么此CSS轉換不起作用

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;
}

我嘗試使用不透明度進行過渡，它不起作用，但是如果執行背景更改效果，它可以起作用。

演示http://jsfiddle.net/rsg4e/

Answer 1

您處在正確的軌道上-只是走錯了路。

修正了你的小提琴

您想要的是改變不透明性的背景顏色，而不是整個元素及其內部可能發生的任何變化。 您只需將背景設置為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;
}

演示