在鼠标悬停上显示html中图像的文本

I would like to display text when the user mouseovers the image.

当用户鼠标移过图像时，我希望显示文本。

How can I do this in HTML/JS?

如何在HTML/JS中实现这一点?

4 个解决方案

#1

You can use title attribute.

可以使用title属性。

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

You can change the source of image as you want.

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

And as @Gray commented:

正如@Gray评论道:

You can also use the title on other things like <a ... anchors, <p>, <div>, <input>, etc. See: this

你也可以在其他东西上使用标题，比如 ， …锚，

， ，等等。见

#2

You can use CSS hover
Link to jsfiddle here: http://jsfiddle.net/ANKwQ/5/

您可以在这里使用CSS hover链接到jsfiddle: http://jsfiddle.net/ANKwQ/5/

HTML:

HTML:

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

CSS:

CSS:

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

a:hover + div {
    display: block;
}​

#3

You can do like this also:

你也可以这样做:

HTML:

HTML:

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

In javascript:

在javascript中:

function somefunction()
{
  //Do somethisg.
}

​

​

#4

You can use CSS hover in combination with an image background.

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

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

HTML

HTML

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