146

当用户将鼠标悬停在图像上时，我想显示文本。

我怎样才能在 HTML/JS 中做到这一点？

4

4 回答 4

277

您可以使用title属性。

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

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

正如@Gray评论的那样：

您还可以title在其他事物上使用 ，例如<a ...锚点、<p>、<div>、<input>等。参见：this

于 2012-08-24T07:50:59.110 回答
17

您可以在此处使用 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;
}​
于 2012-08-24T07:52:16.083 回答
6

你也可以这样做：

HTML：

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

在 JavaScript 中：

function somefunction()
{
  //Do somethisg.
}

​</p>

于 2012-12-18T10:39:19.833 回答
3

您可以将 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

<div class="image"><a href="#">Text you want on mouseover</a></div>
于 2012-08-24T07:57:23.267 回答