2016-03-06 325 views
1

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

這是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; 
} 
+0

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

+0

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

+0

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

回答

2

.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>

+0

非常感謝您 – user2522053

+0

沒問題@ user2522053 – symlink