使用onmouseover jQuery

Question

我想通过jQuery（onmouseover和onmouseout）用标签中的文本替换图像。谁能给我一个例子吗？

Answer 1

转到此链接：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>