使用 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>
我想通过 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>