鼠标移动到某处出现被隐藏的div

最新推荐文章于 2023-12-15 18:15:49 发布

原创最新推荐文章于 2023-12-15 18:15:49 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用CSS:hover选择器来控制元素显示与隐藏的方法。通过:hover将原本display设置为none的元素修改为block，实现鼠标悬停时元素可见的效果。示例代码展示了如何在div元素上应用此技术。

其实也就是:hover到div的时候将被隐藏的div accout的display:none修改为block。(visibility的hidden与visible也可以;)其实说白了就是css选择器的一个问题

<!DOCTYPE html>
<html>
  <head>
    <title>tiantueadmin</title>
    <style>
		.accout{
			background-color:#8bb907;height:100px;width:100px;display:none;
		}
		.g-info{
			width:400px;height:200px;border:2px solid #ff0000;
		}

		.g-info:hover .accout{display:block;}
    </style>
  </head>
  <body>
    
	
	<div class="g-info"><div class="accout"></div></div>
    <!-- built files will be auto injected -->
  </body>
</html>