使用 onMouseover JavaScript/HTML 显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29485224/
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
Displaying text using onMouseover JavaScript/HTML
提问by Bobby Digital
I have a task that calls for an image of a famous person and the goal here is that once the user moves the mouse onto the image, a text displaying a quote made by that person will be visible. Once the user moves off the image, the text will disappear. This sounds relatively simple and I know this can be done using CSS however I wish to broaden my HTML skills and will ignore CSS for now and focus on HTML and JS. Now I know that the onMouseover is the key event handler for this, however I feel as if my code has errors that I'm not aware. Everything is enclosed within the script tags. Thanks.
我有一个任务需要一个名人的图像，这里的目标是一旦用户将鼠标移动到图像上，就会看到显示该人引用的文本。一旦用户离开图像，文本就会消失。这听起来相对简单，我知道这可以使用 CSS 来完成，但是我希望扩大我的 HTML 技能，现在将忽略 CSS 并专注于 HTML 和 JS。现在我知道 onMouseover 是这个的关键事件处理程序，但是我觉得我的代码好像有我不知道的错误。一切都包含在脚本标签中。谢谢。
<img src="julius_caesar.jpg" id="jCaes" onMouseover="displayQuote();">
function displayQuote() {
document.getElementById("jCaes").value = "I came, I saw, I conquered";
}
回答by Nakul91
You need a title attribute to display text on mouse hover.
您需要一个 title 属性来在鼠标悬停时显示文本。
<img src="julius_caesar.jpg" id="jCaes" title="your text"/>
回答by Ganesh Salunkhe
Like this Demo?
喜欢这个 Demo吗？
body {
padding:30px;
font:normal 12px/1.5 Arial, sans-serif;
}
/* Hover tooltips */
.field-tip {
position:relative;
cursor:help;
}
.field-tip .tip-content {
position:absolute;
top:-22px; /* - top padding */
right:9999px;
width:200px;
margin-right:-220px; /* width + left/right padding */
padding:10px;
color:#fff;
background:#333;
-webkit-box-shadow:2px 2px 5px #aaa;
-moz-box-shadow:2px 2px 5px #aaa;
box-shadow:2px 2px 5px #aaa;
opacity:0;
-webkit-transition:opacity 250ms ease-out;
-moz-transition:opacity 250ms ease-out;
-ms-transition:opacity 250ms ease-out;
-o-transition:opacity 250ms ease-out;
transition:opacity 250ms ease-out;
}
/* <http://css-tricks.com/snippets/css/css-triangle/> */
.field-tip .tip-content:before {
content:' '; /* Must have content to display */
position:absolute;
top:50%;
left:-16px; /* 2 x border width */
width:0;
height:0;
margin-top:-8px; /* - border width */
border:8px solid transparent;
border-right-color:#333;
}
.field-tip:hover .tip-content {
right:-20px;
opacity:1;
}<span class="field-tip">
<img src = "https://www.gravatar.com/avatar/41bd91a4e61ab446e69a72e54dade869?s=32&d=identicon&r=PG&f=1">
<span class="tip-content">This Is my Quote.</span>
</span> If this what you want then Bootstrap Tooltip also help you.
如果这是您想要的，那么 Bootstrap Tooltip 也可以帮助您。
See Here
看这里
回答by Andrew Hendrie
Solution One:You can add a title attribute to your HTML tag:
解决方案一：您可以向 HTML 标签添加标题属性：
<img src="julius_caesar.jpg" id="jCaes" title="your text" />
Solution Two:You could use css for this too (if you want to style the quote that is displayed):
解决方案二：您也可以为此使用 css（如果您想设置显示的引用的样式）：
div.quote {
display: none;
border:1px solid #000;
height:30px;
width:290px;
margin-left:10px;
}
img#jCaes:hover + div.quote {
display: block;
}
Solution Three:There's really no need to use JavaScript for this; however, here's a JS solution as well:
解决方案三：真的没有必要为此使用 JavaScript；但是，这里也有一个 JS 解决方案：
Additional HTML:
附加 HTML：
<div id="popup">Your quote here</div>
CSS:
CSS：
#popup {
display:none;
}
JS
JS
var e = document.getElementById('jCaes');
e.onmouseover = function() {
document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('popup').style.display = 'none';
}
Solution Four:Here's another solution if you can use jQuery: http://jsfiddle.net/9RxLM/
解决方案四：如果您可以使用 jQuery，这是另一个解决方案：http: //jsfiddle.net/9RxLM/
回答by please delete me
Tag img not have attribute "value"
标记 img 没有属性“值”
<script>
function displayQuote() {
document.getElementById("jCaes").textContent = "I came, I saw, I conquered";
}
</script>
<img src="http://www.tivix.com/uploads/blog_pics/Android-logo.png" onMouseover="displayQuote();" height="150" width="150">
<p id="jCaes"></p>
