在鼠标悬停上为 html 中的图像显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12105214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display text on MouseOver for image in html
提问by jseth
I would like to display text when the user mouseovers the image.
我想在用户将鼠标悬停在图像上时显示文本。
How can I do this in HTML/JS?
我怎样才能在 HTML/JS 中做到这一点？
回答by Farhad Jabiyev
You can use titleattribute.
您可以使用title属性。
<img src="smiley.gif" title="Smiley face"/>
You can change the source of image as you want.
您可以根据需要更改图像来源。
And as @Graycommented:
正如@Gray评论的那样：
You can also use the titleon other things like <a ...anchors, <p>, <div>, <input>, etc.
See: this
您还可以在锚点、、、 等title其他事物上使用。请参阅：this<a ...<p><div><input>
回答by jseth
You can use CSS hover
Link to jsfiddle here: http://jsfiddle.net/ANKwQ/5/
您可以
在此处使用 CSS 悬停
链接到 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;
}?
回答by user
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.
}
?
?
回答by mat
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>
