<body>
<div id="d1">
<div id="d2">
<div id="d3"></div>
</div>
</div>
<script src="../jquery-1.8.3.min.js"></script>
<script>
/* $("#d1").mouseover(function(){
console.log("----------");
console.log("鼠标进入d1");
}).mouseout(function(){
console.log("鼠标移出d1");
});*/
/*如果只给最外层绑定鼠标进入鼠标移出的事件会有什么问题
会出现鼠标移入第二层第一层的时候并没有离开第三层
也会出现触发mouseout
解决:用jq的mouseenter和mouseleave
*/
/* $("#d1").mouseenter(function(){
console.log("----------");
console.log("鼠标进入d1");
})
.mouseleave(function(){
console.log("鼠标移出d1");
});
*/
//mouseenter和mouseleave的简写形式就是hover()括号里面是两个
//分别为mouseenter和mouseleave的function
$("#d1").hover(
function(){console.log("进去")},
function(){console.log("离开")}
);
</script>
</body>
<style>
.kk{
width: 100px;
height: 100px;
background-color: violet;
}
.kk:hover{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="kk">我有hover</div>
<script src="../jquery-1.8.3.min.js"></script>
<script>
//hover中的mouseenter和mouseleave简写成toggleClass
$(".kk").hover(
//addclass就是增加class的某个属性
//removeclass就是去掉class某个属性
// function(){$(this).addClass("hover")},
// function(){$(this)}.remove("hover")
//由于addclass和removeclass这两个一直是来回切换的,
//所以可以直接写成一个toggle
function(){$(this).toggleClass("hover")}
)
</script>
</body>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）