我希望在用户将鼠标悬停在图像上时显示文本。
请问如何在HTML/JS中实现此功能?
请问如何在HTML/JS中实现此功能?
你可以使用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>
<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ' onmouseover="somefunction();"></a>
function somefunction()
{
//Do somethisg.
}
.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>
title
属性,例如<a ...>
锚标签、<p>
段落、<div>
容器、<input>
输入框等等。详情请参见:http://www.w3schools.com/tags/att_global_title.asp - Gray