使用onMouseover顯示文本JavaScript/HTML

我有一個任務需要一個着名人物的圖像，這裏的目標是，一旦用戶將鼠標移動到圖像上，顯示該人所作的報價的文本將成爲可見。一旦用戶離開圖像，文字就會消失。這聽起來相對簡單，我知道這可以使用CSS完成，但我希望擴大我的HTML技能，並且現在將忽略CSS並專注於HTML和JS。現在我知道onMouseover是此事件的關鍵事件處理程序，但是我感覺好像我的代碼有我不知道的錯誤。所有內容都包含在腳本標記中。謝謝。使用onMouseover顯示文本JavaScript/HTML

<img src="julius_caesar.jpg" id="jCaes" onMouseover="displayQuote();"> 
function displayQuote() { 
document.getElementById("jCaes").value = "I came, I saw, I conquered"; 
}

來源

2015-04-07 Bobby Digital

只需添加文本在'了'img' – grabthefish

的title'屬性不需要onmouseover事件對於這一點，只需添加title屬性對圖片標記像 Text you want to show –

您需要一個title屬性才能在鼠標懸停上顯示文本。

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

來源

2015-04-07 06:35:11 Nakul91

解決方法一：您可以添加標題屬性您的HTML標籤：

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

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/

來源

2015-04-07 06:38:14

理由downvote？ –

你剛纔複製Nakul91的答案 – pan1490

那麼這是最基本的解決方案。我已經給出了另一個選項。 –

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

來源

2015-04-07 06:40:30

謝謝大家，你們很棒！實踐使完美！ –

像這樣 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>

如果這就是你想要什麼，然後引導提示工具還可以幫助您。

見Here

來源

2015-04-07 06:42:42

使用onMouseover顯示文本JavaScript/HTML

回答

相關問題