js jqurey css 鼠标移动到父级显示子级

最新推荐文章于 2023-09-30 22:21:08 发布

林间风雨

最新推荐文章于 2023-09-30 22:21:08 发布

阅读量886

点赞数

分类专栏： js CSS

本文链接：https://blog.csdn.net/jack_rose_me/article/details/108860405

版权

js 同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

CSS

41 篇文章 2 订阅

订阅专栏

1、鼠标移动到父级显示子级

  <style type="text/css">
  .father .child{
    display:none;
  }
  .father:hover .child{
    display:block;
    z-index: 6;
  }
 </style>
<body>
     <div class="father">鼠标移进来有惊喜哦
            <p class="child">我是那个隐藏的小惊喜，鼠标引进来我就出现啦</p>
      </div>    
</body>

2、原生js显示隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
/**js 方式**/
function myFunction(){	
	var displayDiv = document.getElementById("myModal").style.display;
	if (displayDiv == "none") {
		document.getElementById("myModal").style.display="block";//显示
	} else {
		document.getElementById("myModal").style.display="none";//隐藏
	}		
}
</script>

<!-- jquery 方式
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
function myFunction(){	
	console.log("1212")
	console.log($("#myModal")[0].style.display)
	var displayDiv = $("#myModal")[0].style.display;
	if (displayDiv == "none") {
		$("#myModal").css("display","block");//显示
	} else {
		$("#myModal").css("display","none");//隐藏
	}	
}
</script>
-->
</head>
<body>
<input type="button" onclick="myFunction()" value="显示警告框" />
<div id="myModal">sdjfklsjdkflsdlfjls</div>
</body>
</html>

林间风雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js jqurey css 鼠标移动到父级显示子级

1、鼠标移动到父级显示子级<style type="text/css"> .father .child{ display:none; } .father:hover .child{ display:block; z-index: 6; }</style><body> <div class="father">鼠标移进来有惊喜哦 <p class="child"&...
复制链接

扫一扫