mouseenter /離開img淡入/淡出文本div不工作

Question

我有一個圖像，我想淡出在標題div。當鼠標進入div時，caption div應該直接淡入圖像，鼠標離開時淡入淡出。

其次，我想添加一個click toggleClass函數來選擇和取消選擇圖像。當選擇圖像時，標題應該保持顯示/顯示。當通過點擊取消選擇圖像時，標題應該爲fadeOut。

底線：1）鼠標輸入/退出淡入/淡出標題2）點擊切換選擇類以保持標題顯示或取消選擇隱藏。

的FiddleJS：http://jsfiddle.net/jhyqt5/cBsqN/

HTML：

<div class="caption">Into the Night</div> 

<img src="https://scontent-a-pao.xx.fbcdn.net/hphotos-frc1/189612_10100244250167513_7332862_n.jpg" class="img-circle"> 
</div> 

CSS：

.img-circle{ 
    border-radius: 50%; height: 140px; width: 140px; 
} 
.caption{ 
    background-color: black; opacity: .7; 
    text-align: center; line-height: 120px; color: white; 
    position: absolute; display: none; 
    border-radius: 50%; height: 140px; width: 140px; 
} 

JS：

$('.caption').mouseenter(function(){ 
    var image = $(this).find('img'), 
     caption = $(this).find('div'); 
    caption.height(image.height()); 
    caption.width(image.width()); 
    caption.fadeIn(); 
}).mouseleave(function(){ 
    var image = $(this).find('img'), 
     caption = $(this).find('div'); 
    caption.height(image.height()); 
    caption.width(image.width()); 
    caption.fadeOut(); 
}); 

Answer 1

首先在你的提琴添加jquery。其次，你可以用css自己實現懸停效果，除了第二件事之外，你不需要jquery。添加一個包裝來包裝你的img和overlay，並且只需添加一些css規則。

CSS：

.wrapper{ 
    position:relative; 
} 
.caption { 
    background-color: black; 
    opacity: .7; 
    text-align: center; 
    line-height: 120px; 
    color: white; 
    position: absolute; 
    display: none; 
    border-radius: 50%; 
    width:140px; 
    height:140px; 
} 
.wrapper:hover .caption{ /*Show it when hovered*/ 
    display: block; 
} 
.wrapper.active .caption{ /*Show it always when parent has class active*/ 
    display: block; 
} 

HTML：

<div class="wrapper"> 
    <div class="caption">Into the Night</div> 
    <img src="https://scontent-a-pao.xx.fbcdn.net/hphotos-frc1/189612_10100244250167513_7332862_n.jpg" class="img-circle"> 
</div> 

JS：

$('.wrapper').on('click', function() { 
    $(this).toggleClass('active'); //toggle the class to add or remove each click 
}); 

Demo

Answer 2

你的HTML格式不正確，嘗試一下本作的淡入淡出效果

<div class="image"> 
<div class="caption">Into the Night</div> 

<img src="https://scontent-a-pao.xx.fbcdn.net/hphotos-frc1/189612_10100244250167513_7332862_n.jpg" class="img-circle"> 
</div> 

的Javascript

$('.image').mouseenter(function(){ 
    var image = $(this).find('img'), 
     caption = $(this).find('div'); 
    caption.height(image.height()); 
    caption.width(image.width()); 
    caption.fadeIn(); 
}).mouseleave(function(){ 
    var image = $(this).find('img'), 
     caption = $(this).find('div'); 
    caption.height(image.height()); 
    caption.width(image.width()); 
    caption.fadeOut(); 
}); 

http://jsfiddle.net/ZDWzm/1/