在 mouseOver 上为 html 中的图像显示文本

当用户鼠标移动图像时，我想显示文本。

我如何在 HTML/JS 中做到这一点？

html
image

559190 次浏览

小开

最佳答案

可以使用 title属性。

<img src="smiley.gif"  title="Smiley face"/>

您可以根据需要更改图像源。

正如 @ Gray评论的那样:

您也可以使用 title的其他事情，如 <a ...锚，<p>，<div>，<input>等。见: 译自: 美国《科学》杂志网站(http://w3school. com/tag/att _ global _ title.asp)原文地址: http://w3school. com/tag/att _ global _ title.asp

小开

你可以使用 CSS 悬浮
这里链接到 jsfiddle: http://jsfiddle.net/ANKwQ/5/

HTML:

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ'></a>
<div>text</div>

CSS:

div {
display: none;
border:1px solid #000;
height:30px;
width:290px;
margin-left:10px;
}


a:hover + div {
display: block;
}

小开

您可以结合使用 CSS 悬停与图像背景。

CSS

   .image
{
background:url(images/back.png);
height:100px;
width:100px;
display: block;
float:left;
}


.image  a {
display: none;
}


.image  a:hover {
display: block;
}

超文本标示语言

<div class="image"><a href="#">Text you want on mouseover</a></div>

小开

你也可以这样做:

HTML:

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ' onmouseover="somefunction();"></a>

在 javascript 中:

function somefunction()
{
//Do somethisg.
}