Question

我想在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>

Answer 1

您只能使用css而不是使用javascript：codepen: display text when I hover - 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;
}

Answer 2

您想用图像替换文本还是将文本放在其他位置？根据我的理解，请查看以下代码：

    <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>

Answer 3

要在图片上书写任何文字，或者甚至添加图标或类似内容，您必须在图片标记之前创建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

根据需要更改背景颜色和不透明度。 jQuery代码：

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

}）;

Answer 4

你很亲密。我认为你的代码现在的问题是你的div有＆＃34; onmouseover＆＃34;和＆＃34; onmouseout＆＃34;真的很小，因为它里面没有任何东西。此外，有些浏览器不会像你拥有的那样对内联创建的事件作出反应。此外，块样式可能会在某些浏览器中出现一些样式问题。你可能不想要这个，而只是试图带走＆＃34; none＆＃34;展示中。如果可以的话，我也会指向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＆＃34; sub1＆＃34;其中有文字。你也可以修改里面的文字等。选项是无止境的。我希望这能让你开始。如果有，请接受答案。如果您需要更多帮助，请发表评论，我可以更新我的答案。谢谢！

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

4 个答案: