关闭

鼠标移动/经过图片或div,图片变化。强大的onmouseover

标签: javascript鼠标移动图片
618人阅读 评论(0) 收藏 举报

如果是移动到图片上图片变化,可以直接写:

<img src="/images/s1.png" onmouseover="this.src='/images/s1-on.png'" onmouseout="this.src='/images/s1.png'"/>


如果移动到某个元素上,元素的样式改变,可以写作:

<div class="list_out" onmouseover="this.className='list_over'" onmouseout="this.className='list_out'">

同理可以改变该元素的任意属性


如果鼠标在某个div内移动时,不管移动到哪儿,只要在本区块内,就改变某个图片,可以写作:

<div onmouseover="mouseOver()" onmouseout="mouseOut()">
<img src="/i/eg_mouse2.jpg" id="b1" />
</div>

头部引用javascript代码:

<script type="text/javascript">
function mouseOver()
{
document.getElementById('b1').src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById('b1').src ="/i/eg_mouse2.jpg"
}
</script>

/*         本部分javascript代码来源于w3c官网的onmouseover事件介绍          */

有了以上的几种方案,可以解决大部分的需求。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:11306次
    • 积分:256
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:7篇
    • 译文:0篇
    • 评论:0条
    文章分类