在懸停父項上切換可見性子項

Question

當我懸停圖時，我想顯示圖像標題（例如圖像名稱）。

這是我的HTML：

<div class="thumbnail-grid flex"> 
    <a href="#" class="flex-item"> 
     <figure class="i1"> 
      <figcaption class="hide"> caption blabla 
       <img src="img/view.png"/> 
      </figcaption> 
     </figure> 
    </a> 
</div> 

我試圖讓在Javascript功能：

var text = document.querySelector('figcaption'); 

document.querySelector('figure').onMouseOver = function() { 
    text.classList.remove('hide'); 
} 

document.querySelector('figure').onMouseOut = function() { 
    text.classList.add('hide'); 
} 

在我的CSS我.hide設置爲顯示：無;但我的功能不起作用。

有人可以幫我嗎？

現場演示：http://jsfiddle.net/e27Dt/613/

Answer 1

與jQuery試試這個。

$(".caption").hide(); 
$(".flex-item").hover(function(){ 
$(".caption").toggle(); 
}); 

標題是figcaption的類。當您懸停flex-item時，標題將被切換。

Answer 2

如果它是好的，我做到了只用CSS看到http://jsfiddle.net/5qq9fz9r/

HTML

<div id="figure"> 
<img src="http://placekitten.com/300/301"/> 
<div id="name">NAME</div> 
</div> 

CSS

#name{ 
overflow:hidden; 
height:0; 
text-align:center; 
top:0; 
position:absolute; 
background-color:black; 
color:white; 
width:300px; 
transition:2s; 
} 

#figure img:hover ~ #name{ 
height:80px; 
} 

Answer 3

使用jQuery：

HTML

<figure> 
    <img src="http://www.nnsheriff.org/img/placeholder/blogpost-placeholder-100x100.png" alt="The Pulpit Rock" width="304" height="228"> 
    <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption> 
</figure> 
<figure> 
    <img src="http://www.nnsheriff.org/img/placeholder/blogpost-placeholder-100x100.png" alt="The Pulpit Rock" width="304" height="228"> 
    <figcaption>Fig2. - A view of the pulpit rock in Norway.</figcaption> 
</figure> 

CSS

figcaption { 
    display:none; 
} 

SCRIPT

$("figure").on({ 
    mouseenter: function() { 
     $(this).find($("figcaption")).css("display", "block"); 
    }, 
    mouseout: function() { 
     $(this).find($("figcaption")).css("display", "none"); 
    } 
}); 

Fiddle Demo