Question

当您将鼠标悬停在span-tag上时，我尝试显示图片。我在互联网上查了一下，但我找到的并没有用。我现在最终得到了这段代码：

<span style="display:inline-block;">
 <img class="manImg" src="_src/mypicture.jpg">
</span>

......问题在于放置'可悬浮'文本的位置。当我将鼠标悬停在该文本上时，它将显示图像。

Answer 1

img { display: none; }    
.parent:hover img { display: block; }

Example

Answer 2

您只能通过 css 执行此操作。

<span class="container">
  <p class="hover-text">Hover text here</p>
 <img class="manImg" src="_src/mypicture.jpg">
</span>

.container {
  display: inline-block;
}
.manImg {
  display: none;
}
.hover-text:hover ~ .manImg {
  display: block;  
}

Answer 3

你可以在onmouseover事件上使用JavaScript。

<span style="display:inline-block;" onmouseover="your javascript code">

Answer 4

以下是一种方法：

＆＃13;

function mouseIn() {
  $('.img').addClass('show');
}

function mouseOut() {
  $('.img').removeClass('show');
}

$('.hover-me').hover(mouseIn, mouseOut);

＆＃13;

.img  {
  display: none;
}

.img.show {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="display:inline-block;">
  <p class="hover-me">hi</p>

 <img src="http://static.ddmcdn.com/en-us/apl/breedselector/images/breed-selector/dogs/breeds/australian-shepherd_01_sm.jpg" class="img">
</span>

＆＃13;

这利用了JQuery＆＃39; hover。默认情况下隐藏图像。当鼠标悬停在文本上时，我会添加一个类来显示图像。当鼠标停止悬停时，我会删除该类以再次隐藏图像。

悬停在文本上时显示图像

4 个答案: