在HTML中，鼠标悬停在图像上时显示文本

Question

我希望在用户将鼠标悬停在图像上时显示文本。

请问如何在HTML/JS中实现此功能？

- jseth

Answer 1

你可以使用title属性。

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

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

正如@Gray所评论的：

您还可以在其他元素（如<a ...锚点，<p>，<div>，<input>等）中使用title。 请参见：这里。

- Farhad Jabiyev

---

你还可以在其他元素上使用title属性，例如<a ...>锚标签、<p>段落、<div>容器、<input>输入框等等。详情请参见：http://www.w3schools.com/tags/att_global_title.asp - Gray

Answer 2

你可以使用CSS的hover：

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

a:hover+div {
  display: block;
}

<a><img src='https://placekitten.com/100/100'></a>
<div>text</div>

- user1317647

Answer 3

你可以这样做：

HTML：

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

在JavaScript中：

function somefunction()
{
  //Do somethisg.
}

​

- user

Answer 4

您可以将CSS hover与图像背景结合使用。

.image {
  background: url(https://placekitten.com/100/100);
  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>

- mat