onmouseover事件

onmouseover：鼠标从元素上移出

案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#b{width: 880px;height: 400px;background-image: url(../img/1.jpg);background-repeat: no-repeat;}</style></head><body><div class="a"><img src="../img/1.jpg" alt="" width="200" ><img src="../img/2.jpg" alt="" width="200" ><img src="../img/3.jpg" alt="" width="200" ><img src="../img/4.jpg" alt="" width="200" ></div><div id="b" style="background-image: url(../img/1.jpg);"></div><script type="text/javascript">var imgs=document.querySelectorAll(".a img")//给每一个img标签绑定一个onmouseover事件：鼠标移入到标签上触发的事件//onmouseout:鼠标从元素上移出for(var i=0;i<imgs.length;i++){img[i].onmouseover=function(){document.getElementById("b").style.backgroundImage="url("+this.src+")"}}</script></body>
</html>

onmouseover事件相关推荐

深度理解onmouseover事件和onmouseout事件
今天简单的讲解下onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的 ...
html onmouseover 注释掉,HTML onmouseover事件用法及代码示例
将鼠标指针移到元素或其子元素上时,将发生HTML中的DOM onmouseover事件. 用法: 在HTML中: 在JavaScript中: object.onmouseover = function ...
测试onmouseover事件
function yellowevent(){var links = document.getElementsByTagName("p"); //获取需要添加事件的所有p元素for ...
设置layui菜单可手动收缩、onmouseover事件
onmouseover事件执行内容问题为了设计可收缩菜单栏,当鼠标经过指定位置是显示拖拉光标并可点击进行拖拉,但在onmouseover事件中进行拖动距离的叠加会造成拖动距离大于实际移动距离,因此: ...
js中onmouseover事件不起作用
定义和用法 onmouseover 事件会在鼠标指针移动到指定的对象上时发生. 例如当鼠标滑过ul下的li下的a标签时需要实现某种效果可以试试下面这个方法 <!DOCTYPE html> ...
onmouseover 事件
, , , , , , , , , , , , , to , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 支持该事件的 Java ...
js的dom操作,onmouseover事件,onmouseleave事件,定时器
样式 onmouseover鼠标放上改变触发事件 onmouseleave鼠标离开改变触发事件 <!DOCTYPE html> <html><head><me ...
onmouseover事件中把鼠标变成小手形状
在网上查了些资料,很多说是把相应的标签的 style.cursor='hand',即style.cursor属性设置为"hand",经测试,这种写法经常出现问题,改成 style. ...
父元素onmouseover触发事件在父子元素间移动不停触发的问题
今天写了一个侧边栏动态展开收缩的效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...

onmouseover事件

onmouseover事件相关推荐

最新文章

热门文章