<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移入移出事件</title>
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background:yellow;
}
#div2 {
width: 100px;
height: 100px;
background: blue;
}
/*#div1:hover #div2{
background:red;
}*/
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2"></div>
<!--1.当给一个元素添加了hover伪类之后,鼠标移入该元素,会触发对应的伪类选择器里的设置,鼠标移出恢复原状
2.添加了hover的元素只能影响其子元素,其他类型的元素无效果.
-->
<script type="text/javascript">
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
//鼠标移入事件01
// div1.onmouseover = function(){
// div2.style.background= "red";
// }
//鼠标移出事件01
// div1.onmouseout = function(){
// div2.style.background = "yellow";
// }
//鼠标移入事件02
div1.onmouseenter = function(){
div2.style.background = "red";
}
//鼠标移出事件02
div1.onmouseleave = function(){
div1.style.background = "red";
}
/*
* 鼠标移入移出的特点
* 1.其移入与移出的效果需要分别绑定事件
* 2.通过绑定移入移出事件可以影响任意层级关系的两个元素.
*/
/*
* onmouseenter和onmouseleave 兼容性更好.
*/
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
