On 鼠标悬停效果带文字说明

Question

我正在建立我的第一个网站，我想添加一个功能。我的意思是 onmouse effect，当鼠标悬停在图像上时 - 它显示图像的细节，但不是图像上的悬停效果，而是鼠标旁边的一个新块。

本网站使用 Django 作为后端开发，bootstrap 使用 javascript 作为前端开发。我已经在寻找任何解决方案，但找不到任何有用的东西。

我特别在寻找一些提示，或者一些可能会引导我达到预期结果的示例。

Answer 1

您可以使用 CSS 动画和 + css 选择器来匹配同级 <p>.
这是一个例子：

function imgHover(obj, event) {
  let span = obj.querySelector('span');
  span.style.left = event.offsetX + 'px';
  span.style.top = event.offsetY + 'px';
}

.img-desc {
  position: relative;
  display: inline-block;
}

.img-desc span {
  opacity: 0;
  margin: 0 10px;
  transition: opacity 0.4s;
  position: absolute;
  pointer-events:none;
  white-space: nowrap;
  
  background-color: #000;
  border-radius: 3px;
  padding: 2px 4px;
  color: #FFF;
  font-family: sans-serif;
  font-size: 12px;
}

.img-desc:hover > span {
  opacity: 1;
}

<div class="img-desc" onmousemove="imgHover(this, event)">
  <img width="240" src="https://picsum.photos/id/237/536/354" />
  <span>Image description</span>
</div>

On 鼠标悬停效果带文字说明

Onmouse hover effect with text description

html

javascript

css

preloader