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

【问题标题】：Replace image with text using onmouseover jQuery使用 onmouseover jQuery 将图像替换为文本
【发布时间】：2019-02-10 09:54:03
【问题描述】：

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

【问题讨论】：

任何人都可以帮忙:(

标签： c# onmouseover onmouseout

【解决方案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>

【讨论】：

如何在您的示例中使用标签文本。请注意，我将代码后面的值分配给标签（ asp.met 控件），所以我如何在您的示例中显示它的值 @mdln97
你需要告诉我你具体有什么，我不确定你在说什么标签文本
在后面的代码中 - NewAccountsLabel.Text = ds1.Tables[0].Rows[0][0].ToString();我将标签定义为
好吧，只需为您的标签添加 class=“overlay”，然后尝试获取它的文本，您可以使用纯 JS 中的 innerHtml 或使用 jQuery 的 html() 或 text() 来实现
我可以这样做吗？因为我没有得到任何效果:) $(document).ready(function () { $(".container").mouseover(function () { var hiddenVar = $('[id$="NewAccountsLabel"]') .html(); $(".overlay").css("不透明度", "1"); $(".overlay").text(hiddenVar); }); $(".container").mouseout( function () { $(".overlay").css("opacity", "0"); }); });