Question

我想在你悬停图像#gmail时显示我的文本#gmail_info，但我没有什么问题，看看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

使用jQuery解决方案。你的CSS变化很小。我改为使用visibility: hidden;。

http://jsfiddle.net/vakn3yfp/

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

Answer 2

如果你可以改变你的html，你可以这样做。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

您也可以使用display。

代替css visibility属性

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

与display: none;的区别在于，visibility: hidden;仍将使用与可见时相同的空间。

图像悬停导致显示一些文本

2 个答案: