鼠标悬停效果与文字说明

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标悬停效果与文字说明相关的知识,希望对你有一定的参考价值。

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

这个网站是使用Django作为后端部分开发的,并在前端部分使用javascript引导。我一直在寻找任何解决方案,但我找不到任何有用的东西。

我特别想要一些提示,或者一些可能导致我达到预期结果的例子。

答案

您可以使用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>

以上是关于鼠标悬停效果与文字说明的主要内容,如果未能解决你的问题,请参考以下文章

css如何实现鼠标悬停的提示效果

css鼠标悬停时,换图片

图像翻转效果和图像下方的文字

css如何设置鼠标悬停时每行显示的字数?

为啥用css中伪类hover实现(鼠标悬停显示文字,鼠标移走文字消失)的效果失败(脚本没有错)?

html怎么实现鼠标放在文字上显示文字(附带代码)?