一个人

网站建设 网页设计 网页前端 工作QQ:2335387178 加Q请备注

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

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

<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事件介绍          */

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

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭