display:none到display:block失效问题及解决办法

前端小王hs

已于 2022-11-27 23:56:30 修改

阅读量3.3k

点赞数 3

分类专栏：笔记 Vue3.js 文章标签： javascript 前端 html css3

于 2022-10-19 23:20:46 首次发布

本文链接：https://blog.csdn.net/weixin_44001222/article/details/127417974

版权

笔记同时被 2 个专栏收录

114 篇文章 42 订阅

订阅专栏

Vue3.js

46 篇文章 4 订阅

订阅专栏

🔥🔥🔥欢迎关注csdn前端领域博主: 前端小王hs

🔥🔥🔥email: 337674757@qq.com

🔥🔥🔥前端交流群： 598778642

在项目开发的时候，遇到了这样的需求：鼠标移入后显示按钮，鼠标移出后按钮消失，通过对问题的研究，笔者使用display:none和display:block进行转换，但却出现了失效的问题

整体思路是在要显示的内容外层套个div，div内的内容为display:none，当鼠标移入时，即div:hover时，display:block显示内容

但当笔者第一次运用这种方法的时候，却发现行不通，错误代码如下：

	.title {
		display: flex;
		align-items: center;
		flex: auto;
		}
	.showicon {
		display: none;
		.iconlist {
			margin-left: 50px;
			}
		}
	.showicon：hover {
		display: block;
		}

上述代码犯了一个很简单也很容易错的逻辑误区，就是用display:none的元素去display:block，好比你在一个房间中，把唯一的油灯拿走了，却还想在房间里开灯

解决办法是用父元素去引用hover，代码如下：

	.ta-company {
		flex: auto;
		display: flex;
		align-items: center;
		height: 28px;
		.title {
			display: flex;
			align-items: center;
			flex: auto;
		}
		.showicon {
			display: none;
			.iconlist {
				margin-left: 50px;
			}
		}
		&:hover .showicon {
			display: block;
		}
	}