我想在 JavaScript 中将鼠标移到图像上时显示文本

I want to display text when I move mouse over image in JavaScript

本文关键字：图像 文本 显示 鼠标 JavaScript      更新时间：2023-09-26
我想在

JavaScript中将鼠标移到图像上时显示文本。我不知道我要去哪里，因为我是新手。有一个表格，其中包含我想在将鼠标移到图像上时显示其内容的图像。我想在这里使用 JavaScript。

<script>
function show()
{
var welcome = document.getElementById('sub1');
welcome.style.display = 'block';
}
function hide()
{
 var welcome = document.getElementById('sub1');
 welcome.style.display = 'none';
}   
</script>
<div id="sub1" onmouseover="show();" onmouseout="hide();"> </div>
 //This is the image where I want to display a text.
<td><img border="0" src="images/img1.jpg"
alt="iphone 5s" width="304" height="228"></td>
你可以只使用 css

而不是使用 javascript： codepen： 当我悬停时显示文本 - css

.HTML

<div class="thumb-item">
  <img class="thumb-item__image" src="http://clapat.ro/themes/legrand-wordpress/wp-content/uploads/2015/11/2.jpg" alt="">
  <div class="thumb-item__info">
    <h5>Title here</h5>
    <p>This Is a caption Line</p>
  </div>
</div>

.CSS

.thumb-item {
  width: 400px;
  position: relative;
  overflow: hidden;
}
.thumb-item__image {
  width: 100%;
}
.thumb-item__info {
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  opacity: 0;
  box-sizing: border-box;
  color: #fff;
  padding: 10px 20px;
}
.thumb-item__info h5 {
  font-size: 16px;
  margin: 0;
  padding: 0;
  font-family: tahoma;
  font-weight: bold;
}
.thumb-item__info p {
  font-size: 12px;
  margin: 4px 0 14px;
}
.thumb-item:hover .thumb-item__info {
  opacity: 1;
  bottom: -5px;
}

您想用图像替换文本还是将文本放在其他地方？据我了解，请检查以下代码： 

    <script>
function showText(text){
    document.getElementById("text").innerHTML=text;
}
function hide(){
    document.getElementById("text").innerHTML="";
}
</script>
<img src="image.jpg" id="image" onMouseOver="showText('Some Text')" onMouseOut="hide();">
<div id="text"></div>

要在图像上写入任何文本，甚至添加图标或类似的东西，您必须在图像标签之前创建一个div，通常称为布局div。

<td><div class="layout"></div><img id="testImg" src="Your img path"></td>

注意：我们在放置图像标签之前关闭了div。您的 CSS 将是 ：

background:rgba(7,7,7,0.2);
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
display:none

根据需要更改背景颜色和不透明度..j查询代码 ：

$("#testImg").click(function () {
    $(".layout").css("display", "block");
    $(".layout").text('Test Paragraph');

}）;

你已经相当接近了。我认为您的代码现在的问题是您的具有"onmouseover"和"onmouseout"的div非常小，因为它没有任何内容。 此外，某些浏览器不会像您那样对内联创建的此事件做出反应。此外，块样式在某些浏览器中可能存在一些样式问题。 您可能不希望这样做，而只是想删除显示的"无"。 如果可以的话，我也会指出你 JQuery，但由于你没有提到 JQuery，下面就可以了。 在这里，它也在JSFiddle中供您查看：

https://jsfiddle.net/nkxjphjm/1/

<script>
function show() {
  var welcome = document.getElementById('sub1');
  welcome.style.display = '';
}
function hide() {
  var welcome = document.getElementById('sub1');
  welcome.style.display = 'none';
}
function init() {
  var surround = document.getElementById('surroundDiv');
  surround.onmouseover = show;
  surround.onmouseout=hide;  
}
window.onload = init;   
</script>
<div id="surroundDiv">
<img border="0" src="images/img1.jpg"
alt="iphone 5s" width="304" height="228">
</div>
<div id="sub1" style="display:none">Text to display</div>

现在，当他们将鼠标悬停在图像上时，他们也将越过div。 这将触发显示包含文本的内部div "sub1" 的操作。您还可以修改里面的文本等。 选择是无穷无尽的。 我希望这能让你开始。 如果是这样，请接受答案。 如果您需要更多帮助，请发表评论，我可以更新我的答案。 谢谢！

相关文章：