圖像懸停的結果顯示一些文字

Question

我想讓我的文字#gmail_info顯示當你懸停圖像#gmail，但我有一點問題，看看jsfiddle。 http://jsfiddle.net/jmvoqrxf/

<h2>Kontakt</h2> 
<div id="gmail"><img src="gmail.jpg" alt="Gmail"/></div> 
<div id="info"> 
    <p id="gmail_info">Rostikcze@gmail.com</p> 
</div> 
#gmail:hover #gmail_info { 
    display: block; 
} 
#gmail_info { 
    position: relative; 
    display: none; 
} 
img { 
    height: 30px; 
    width: 30px; 
    display: block; 
    margin-top: 5px; 
    position: relative; 
    top: -18px; 
} 

Answer 1

如果您可以更改您的html，您可以按如下操作。

#gmail_info { 
 
    position: relative; 
 
    display: none; 
 
} 
 
#gmail:hover #gmail_info { 
 
    display: block; 
 
} 
 
img { 
 
    height: 30px; 
 
    width: 30px; 
 
    display: block; 
 
    margin-top: 5px; 
 
    position: relative; 
 
    top: -18px; 
 
}

<h2>Kontakt</h2> 
 
<div id="gmail"> 
 
    <img src="gmail.jpg" alt="Gmail" /> 
 
    <div id="info"> 
 
    <p id="gmail_info">Rostikcze@gmail.com</p> 
 
    </div> 
 
</div>

取而代之的是CSS display財產，你也可以使用visibility。

#gmail_info { 
    position: relative; 
    visibility: hidden; 
} 
#gmail:hover #gmail_info { 
    visibility: visible; 
} 

到display: none;所不同的是，visibility: hidden;仍將使用相同的空間時，這將是可見的。

Answer 2

解決方案與jQuery。在你的CSS最小的變化。我用visibility: hidden;代替。

http://jsfiddle.net/vakn3yfp/

$("#gmail").hover(function() { 
    $("#gmail_info").css("visibility","visible"); 
     }, 
     function() { 
     $("#gmail_info").css("visibility","hidden"); 
     });