🔥🔥🔥欢迎关注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;
		}
	}

通过父元素，即代码中类为.ta-company的元素，去&:hover对应的元素，达到解决目的