激活onmouseover时如何添加文本

时间:2014-05-07 17:39:04

标签: javascript onmouseover onmouseout

<div id="first_caption">
<p style="float: left; clear: left">
<img 
    src="http://www.ottawaskeptics.org/images/stories/lightbulb.jpg" 
    onmouseover="this.src='http://pngimg.com/upload/small/bulb_PNG1251.png'" 
    onmouseout="this.src='http://www.ottawaskeptics.org/images/stories/lightbulb.jpg'"  
    height="50" width="50"
>
<p>How can you save money to do the things you love, and live a healthier life? rollover on the light bulb to see how!</p>
</div>

这是代码。我想要做的是当我将鼠标悬停在图像上时,将文本显示在第一段下方。

1 个答案:

答案 0 :(得分:0)

添加div或span,分配ID,然后在事件中为ID添加值。

var div = document.getElementById('divID');

div.innerHTML = div.innerHTML + 'Extra stuff';

这是完整的例子:

<a href="#" onclick="myClick()">click here</a>
<div id="heading1">
This is existing text. 
</div>

<script>
function myClick(){
text = "This text is added.";
document.getElementById('heading1').innerHTML  = document.getElementById('heading1').innerHTML + text;
}
</script>