事件和onmouseout事件实例"/>
JavaScript中的onmouseover事件和onmouseout事件实例
目录
JavaScript事件
onmouseover事件
onmouseout事件:
onmouseover和onmouseout事件结合案例:
HTML部分
CSS部分
javascript部分
最终效果:
JavaScript事件
事件可以是浏览器行为,也可以是用户行为!
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
JavaScript中的 事件类型有很多种,比如:
1、按钮的单击事件。
2、鼠标悬浮在某个图片上,有着特殊效果。
3、鼠标离开某个图片上,效果消失。
4、使用键盘上某个键,后出现效果。
5、等等……
onmouseover事件
onmouseover事件:指鼠标移动都某个指点的HTML标签上,会出现什么效果。
例如:
var p = document.getElementById("p") /*获取id名字为p的标签*/
/* 给获取到的id添加事件 */
p.onmouseover = function (){alert("鼠标已经移动上来!");
}
var p = document.getElementById("p") /*获取id名字为p的标签*/
/* 给获取到的id添加事件 */
p.onmouseover = function (){alert("鼠标已经移动上来!");
}
onmouseout事件
onmouseout事件:指鼠标移出某个指点的HTML标签后,会出现什么效果。
例如:
var p = document.getElementById("p") /*获取id名字为p的标签*/
/* 给获取到的id添加事件 */
p.onmouseout = function (){alert("鼠标已经移出!");
}
onmouseover和onmouseout事件结合案例:
HTML部分
<!-- 按钮 --><label id="info"><input type="checkbox" />免登录十天</label>
<!-- 弹框 --><div class="div_dis">请注意在安全模式下,单击按钮,请勿在网吧或公共场所使用免登录十天</div>
CSS部分
*{margin:0;padding:0;
}.div_dis{padding: 10px 10px;width: 200px;height: 60px;border: 1px #f00 solid;background: yellow;opacity: 0.6;position: absolute;top: 0;left: 120px;display: none;
}
javascript部分
/* 找元素---找对象 */var oInp = document.getElementById("info");var oDiv = document.getElementsByClassName("div_dis")[0];
/* 操作元素---搞对象 *//* 鼠标一上去之后 */oInp.onmouseover = function (){oDiv.style.display = "block";oInp.style.cursor = "pointer";}/* 鼠标移出之后 */ oInp.onmouseout = function (){oDiv.style.display = "none";}
最终效果:
var p = document.getElementById("p") /*获取id名字为p的标签*/
/* 给获取到的id添加事件 */
p.onmouseout = function (){alert("鼠标已经移出!");
}
HTML部分
<!-- 按钮 --><label id="info"><input type="checkbox" />免登录十天</label>
<!-- 弹框 --><div class="div_dis">请注意在安全模式下,单击按钮,请勿在网吧或公共场所使用免登录十天</div>
CSS部分
*{margin:0;padding:0;
}.div_dis{padding: 10px 10px;width: 200px;height: 60px;border: 1px #f00 solid;background: yellow;opacity: 0.6;position: absolute;top: 0;left: 120px;display: none;
}
javascript部分
/* 找元素---找对象 */var oInp = document.getElementById("info");var oDiv = document.getElementsByClassName("div_dis")[0];
/* 操作元素---搞对象 *//* 鼠标一上去之后 */oInp.onmouseover = function (){oDiv.style.display = "block";oInp.style.cursor = "pointer";}/* 鼠标移出之后 */ oInp.onmouseout = function (){oDiv.style.display = "none";}
最终效果:
onmouseover时
onmouseout时
更多推荐
JavaScript中的onmouseover事件和onmouseout事件实例
发布评论