如何在鼠标悬停上显示弹出文本？ [英] How to display pop up text on mouse hover?

问题描述

当我将鼠标悬停在图片上时，我想从DIV标记中加载一些内容作为弹出文字。当我的鼠标离开的图像流行应该消失，当我再次鼠标在图像内容应该显示为弹出文本。我使用HTML，Jquery，JS为此。这将是非常有用的，如果我得到一个解决方案使用jquery load（）方法。让我知道你的回应。

I want to load some content from a DIV tag as pop up text when i hover over an image. When i mouse leave from that image pop should disappear and when i again mouse over image content should show as pop up text. I am using HTML, Jquery, JS for this. It will be very useful if i get a solution using jquery load() method. Let me know ur response.

推荐答案

或者，没有javascript：

Or, without javascript:

<div class="tooltip-wrap">
  <img src="/some/image/file.jpg" alt="Some Image" />
  <div class="tooltip-content">
    <p>Here is some content for the tooltip</p>
  </div> 
</div>

此CSS：

.tooltip-wrap {
  position: relative;
}
.tooltip-wrap .tooltip-content {
  display: none;
  position: absolute;
  bottom: 5%;
  left: 5%;
  right: 5%;
  background-color: #fff;
  padding: .5em;
}
.tooltip-wrap:hover .tooltip-content {
  display: block;
}

这篇关于如何在鼠标悬停上显示弹出文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！