當我將鼠標懸停在圖像上時，我希望覆蓋懸停效果激活

Question

當我將鼠標懸停在圖像上時，我希望覆蓋圖的淡入效果可以激活。我剛開始在我的第一個網站工作，我是一個javascript begginer，所以我需要一些幫助。這是一個jsfiddle。

HTML代碼：

<div class = "leftpart">  
    <a href="http://www.google.com"> 
     <img src="images/test.jpg"/> 
     <div class="flex-caption hvr-fade">Adventurer Lemon</div> 
    </a> 
</div> 

我沒有任何JavaScript代碼。

Answer 1

插圖的CSS一個多類

主類中添加懸停效果，然後使用.leftpart:hover然後 頁腳顏色變化再加入hvr-fade之後再effece主要 股利懸停

.leftpart:hover .hvr-fade 
{ 
    background-color: #2098d1; 
    color: white; 
} 

Live Demo

Answer 2

您可以通過css也可以

.leftpart a img:hover{opacity:0.8;}