如何将鼠标悬停在图像上并通过缓动显示文本块？ [复制]

Posted 2023-05-08

【中文标题】如何将鼠标悬停在图像上并通过缓动显示文本块？ [复制]

【英文标题】：How can I hover over image and display block of text with easing? [duplicate]

【发布时间】：2020-09-01 13:06:34

【问题描述】：

当我将鼠标悬停在树的图像上时，我想要的是出现一个文本块，这已经有效，但我希望该文本块能够轻松出现。 这是我已经拥有的并且有效，只是不是简单的部分：

html：

<p id="hover-text1" class="hover-text1"> Accomplished! </p>
<img id="tree_image1" class="tree_image1" src="/Tree-red.png">

CSS：

.hover-text1 
 display: none;
 transition: .5s all ease;
 

.tree_image1:hover 
 opacity: 0.3;
 

JS（这是我的 HTML 文件的头部）：

<script type="text/javascript">
    $(document).ready(function()
      $('#tree_image1').mouseenter(function()
        $('#hover-text1').css('display':'block');
      );
      $('#tree_image1').mouseleave(function()
        $('#hover-text1').css('display':'none');
      );
    );
  </script>

因此，当您将鼠标悬停在 tree_image1 上时，会出现文本块 hover-text1，当您使用鼠标离开图像时，文本块会消失。但我希望该文本块以 0.5 秒的速度出现，但我现在的做法不起作用。有人可以帮忙吗？

另外，我使用的是本地服务器、node js、ejs 和 express，也许这很重要。

【问题讨论】：

你不能给显示属性过渡

【参考方案1】：

显示不是转换的属性之一。您可以过渡到可见性和不透明度来实现这一目标

<div class="wrapper">
    <p class="hover-text1"> Accomplished! </p>
    <img id="tree_image1" class="tree_image1" src="/Tree-red.png">
  </div>

.hover-text1 
  visibility: hidden;
  opacity: 0;
  transition: visibility 2s, opacity 2s linear;
  

 .tree_image1:hover 
  opacity: 0.3;
  

.wrapper:hover .hover-text1 
  visibility: visible;
  opacity: 1;

【参考方案2】：

你可以使用jQuery的fadeIn/fadeOut来做同样的事情

$(document).ready(function()
  $('#tree_image1').mouseenter(function()
    $('#hover-text1').fadeIn(500);// 500 - time interval
  );
  $('#tree_image1').mouseleave(function()
    $('#hover-text1').fadeOut(500);
  );
);