Question

我有一个任务需要一个名人的图像，这里的目标是，一旦用户将鼠标移动到图像上，就会显示一个显示该人所做的报价的文本。一旦用户离开图像，文本将消失。这听起来相对简单，我知道这可以使用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";
}

Answer 1

您需要一个title属性才能在鼠标悬停时显示文字。

<img src="julius_caesar.jpg" id="jCaes" title="your text"/>

Answer 2

喜欢这个 Demo？

＆＃13;

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;
        }

＆＃13;

<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>

＆＃13;

如果你想要的话，那么Bootstrap Tooltip也可以为你提供帮助。

请参阅Here

Answer 3

解决方案一：您可以为HTML标记添加title属性：

<img src="julius_caesar.jpg" id="jCaes" title="your text" />

解决方案二：您也可以使用css（如果您想设置显示的报价样式）：

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

img#jCaes:hover + div.quote {
    display: block;
}

解决方案三：实际上没有必要使用JavaScript;然而，这里也是一个JS解决方案：

其他HTML：

<div id="popup">Your quote here</div>

CSS：

#popup {
  display:none;
}

JS

var e = document.getElementById('jCaes');

e.onmouseover = function() {
  document.getElementById('popup').style.display = 'block';
}

e.onmouseout = function() {
  document.getElementById('popup').style.display = 'none';
}

解决方案四：如果您可以使用jQuery，这是另一种解决方案：http://jsfiddle.net/9RxLM/

Answer 4

标签img没有属性＆＃34;值＆＃34;

<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>

使用onMouseover JavaScript / HTML显示文本

4 个答案: