鼠标悬停为子div添加class

最新推荐文章于 2022-11-20 17:56:02 发布

IluckySi

最新推荐文章于 2022-11-20 17:56:02 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： ------javascript 文章标签： javascript moveover moveout 悬停 div

本文链接：https://blog.youkuaiyun.com/sidongxue2/article/details/44779409

------javascript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用jQuery实现鼠标悬停时更改子div样式的HTML页面示例。通过为每个子div单独绑定mouseover和mouseout事件，当鼠标悬停在子div上时为其添加特定样式，并在移除时还原初始样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 
author:IluckySi
since:20150331
功能:一个父div下面有多个子div,如何实现鼠标悬停到子div上面,子div添加class.
 -->
<!DOCTYPE html>
<html>
  <head>
    <title>mouse.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style>
    	.child {
    		width:100px;
    		height:100px;
    		background-color:red
    	}
    	.currentChild {
    		width:120px;
    		height:120px;
    		background-color:black
    	}
    </style>
    <script src="../../jquery/jquery-1.11/jquery.min.js"></script>
    <script>
    $(function() {
    	//获取所有子div.
    	var children = $('div#parent > div');
    	
    	//错误方法:会给所有子div添加class.
    	/* children.mouseover(function(e) {
    		children.addClass('currentChild');
    	}).mouseout(function(e) {
    		children.removeClass('currentChild');
    	});  */
    	
    	//正确方法:通过each为每个子div添加class.
    	children.each(function(i){
    		//注意:this是js对象,$(this)是jquery对象.
	   		$(this).mouseover(function(e) {
	   			$(this).addClass('currentChild');
	       	}).mouseout(function(e) {
	       		$(this).removeClass('currentChild');
	       	});
   		}); 
    });
    </script>
  </head>
  <body>
    <div id="parent">
    	<div class="child">A</div><hr>
    	<div class="child">B</div><hr>
    	<div class="child">C</div><hr>
    	<div class="child">D</div><hr>
    	<div class="child">E</div><hr>
    </div>
  </body>
</html>