在图像上插入文本并通过将鼠标悬停在图像上来更改文本 (JavaScript)

Question

我有这个 HTML 代码，我想在它的中心插入这个图像的描述性文本。之后，我想通过将鼠标悬停在图像上来更改文本。对此有什么想法吗？我尝试了多种解决方案，但大多数解决方案都无法针对多张图像执行此操作，而不仅仅是一张图像。

<div class="col-4 col-6-medium col-12-small">
    <a href="#" class="image fit">
        <img src="images/pic01.jpg" alt="">
    </a>
</div>

Answer 1

您不需要这样的作业javascript

让浏览器使用 #pureCss 为您做事

（使用 javascript 来操纵 DOM 或更改 div 上的类是不必要的矫枉过正）

你可以添加更高性能的任何动画（使用css）

.image.fit{
  /* block capabilities, but still next to each other */  
  display: inline-block;
  /* be the parent for position absolute later */
  position: relative;
}

.image.fit .normal, .image.fit .hover {
  /* position of the box */
  position: absolute;
  bottom: 5%;
  left: 5%;
  right: 5%;

  /* nice box with padding even for multiline */
  background-color: rgba(255,255,255,0.6);
  padding: 5%;
  text-align: center;
  font-family: Arial;
  color: #333;

  /* animate fade, rather than blinking */
  transition: opacity 0.5s;
}

.image.fit .normal {
  opacity: 1; /* visible by default */
}
.image.fit:hover .normal {
  opacity: 0; /* not visible on hover */
}

.image.fit .hover {
  opacity: 0; /* not visible by default */

  /* optional position on top (remove, for the same place) */
  top: 5%;   
  bottom: auto;
}
.image.fit:hover .hover {
  opacity: 1; /* visible on hover */
}

<div class="col-4 col-6-medium col-12-small">
    <a href="#" class="image fit">
        <img src="https://picsum.photos/id/1015/300/150" alt="">
        <div class="normal">water</div>
        <div class="hover">you can go tomorrow, tickets available</div>
    </a>
    <a href="#" class="image fit">
        <img src="https://picsum.photos/id/1016/300/150" alt="">
        <div class="normal">rocks</div>
        <div class="hover">Lorem Ipsum: Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</div>
    </a>

</div>

在图像上插入文本并通过将鼠标悬停在图像上来更改文本 (JavaScript)

Insert text over an image and change the text by hovering the mouse over (JavaScript)

javascript

mouseover

onmouseover

mouseout

onmouseout