突出效果
2022-07-05 本文已影响0人
程序猿的小生活
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/test.js"></script>
<meta charset="utf-8" />
<title>jquery 突出展示效果</title>
</head>
<body >
<div id="app" style="display: inline-block;">
<div >张三 李四</div>
<div >李四</div>
<div >王五</div>
</div>
</body>
<script>
$(function(){
// mouseenter mouseleave 直选中鼠标移入指示的元素 mouseover mouseout 会选中选中元素及其子元素
$("#app").find("div").mouseenter(function(){//鼠标移入
//siblings：兄弟元素不包括自己 $(this)点前选中元素 $(this).css("color","red") 返回一个对象
$(this).css("color","red").siblings("div").css("color","yellow")
})
$("#app").mouseleave(function(){//鼠标移出
$("#app").find("div").css("color","black")
})
})
</script>
</html>
