使用 onmouseover jQuery 将图像替换为文本

Replace image with text using onmouseover jQuery

我想通过 jQuery(onmouseover 和 onmouseout)用标签中的文本替换图像。谁能给我举个例子吗?

转到此 link:https://www.w3schools.com/css/tryit.asp?filename=trycss_css_image_overlay_slidebottom

从样式中删除以下内容:

.container:hover .overlay {
  height: 100%;
}

在头部样式结束标签后添加此脚本:

这是完整答案:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
$(document).ready(function(){
  $(".container").mouseover(function(){
   var hiddenText = $("#labelid").text();
$(".text").text(hiddenText);
$(".overlay").css("height", "100%");
 });
  $(".container").mouseout(function(){
$(".overlay").css("height", "0%");
 });
});
</script>

然后 html/css :

<label id="labelid" style="display: none;"> myText
 </label>
<div class="container">
 <img src="img_avatar.png" alt="Avatar" class="image">
 <div class="overlay">
<div class="text">

</div>
</div>
</div>