将鼠标悬停在文本上时显示图像答案

【问题标题】：Display an image while hover on a text将鼠标悬停在文本上时显示图像
【发布时间】：2017-07-19 21:27:19
【问题描述】：

当您将鼠标悬停在跨度标记上时，我尝试显示图片。我在网上查了一下，但我发现没有用。我现在得到了这段代码：

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

...问题是在哪里放置“可悬停”文本。当我将鼠标悬停在该文本上时，它将显示图像。

【问题讨论】：

title 属性？
很遗憾没有。如果我这样做，当我将鼠标悬停在它上面时，我有一张图片会显示文本。
那你想要什么呢？
我有一个文本，当我将鼠标悬停在它上面时会显示图片。
Make image appear on link hover css的可能重复

标签： html css

【解决方案1】：

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

Example

【讨论】：

这是专业版。 +1

【解决方案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;  
}

【讨论】：

【解决方案3】：

您可以在 onmouseover 事件中使用 JavaScript。

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

【讨论】：

【解决方案4】：

这是您可以做到的一种方法：

function mouseIn() {
  $('.img').addClass('show');
}

function mouseOut() {
  $('.img').removeClass('show');
}

$('.hover-me').hover(mouseIn, mouseOut);

.img  {
  display: none;
}

.img.show {
  display: block;
}

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

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

【讨论】：