爲什麼css轉換不起作用？

所以我試圖把一個圖像塊懸停，但過渡不起作用，我不知道爲什麼會發生這種情況。

這是HTML：爲什麼css轉換不起作用？

<div class="area"> 
     <div class="mask"></div> 
     <img src="http://placehold.it/300x300"> 
    </div>

這是CSS：（光標運作良好，但轉換是不工作）

.area { 
    width: 300px; 
    display: block; 
} 

.area:hover .mask{ 
    display: block; 
    cursor: pointer; 
    transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -webkit-transition: all 1s ease-in-out; 
} 

.mask{ 
    position: absolute; 
    background-color: rgba(226,23,37,0.9); 
    width: 300px; 
    height: 300px; 
    display: none; 
}

來源

2016-03-06 user2522053

你想要動畫什麼屬性？ 'display'沒有意義，這是你在這兩個類上唯一的顯示 – Jeff

顯示：第三個選擇器中的任何一個都不會顯示紅色背景，直到有人懸停在它上面，並且我只是試圖在懸停發生時進行轉換 – user2522053

如果光標正在工作，我認爲整個CSS代碼正在工作，但只是「位置：絕對」使掩碼不可見。你可以使用檢查元素來檢查它。 – jilykate

從.mask刪除display:none和移動background-color: rgba(226,23,37,0.9);到.area:hover .mask規則：

.area { 
 
    width: 300px; 
 
    display: block; 
 
} 
 

 
.area:hover .mask{ 
 
    cursor: pointer; 
 
\t background-color: rgba(226,23,37,0.9); 
 
    transition: all 1s ease-in-out; 
 
    -o-transition: all 1s ease-in-out; 
 
    -ms-transition: all 1s ease-in-out; 
 
    -moz-transition: all 1s ease-in-out; 
 
    -webkit-transition: all 1s ease-in-out; 
 
} 
 

 
.mask{ 
 
    position: absolute; 
 
    width: 300px; 
 
    height: 300px; 
 
}

<div class="area"> 
 
    <div class="mask"></div> 
 
    <img src="http://placehold.it/300x300"> 
 
</div>

來源

2016-03-06 05:06:27 symlink

非常感謝您 – user2522053

沒問題@ user2522053 – symlink

爲什麼css轉換不起作用？

回答

相關問題