[04][创新实训记录]简单CSS实现头像悬浮菜单效果

简单CSS实现头像悬浮菜单效果

先上效果压压惊

由于在iview组件库中没有找到心仪的效果，索性借助几天前看的一个CSS卡片教程视频为灵感实现了这个纯CSS就能实现的简单效果。当然，头像<Avatar>与菜单列表<Card>还是借用了iview的头像与单元格。

实现原理

头像的定位是和特殊的存在，我想要实现的是，头像在鼠标放到头像的时候会产生一个头像便大的动画，随后菜单从右侧飘出，而且最终的叠加效果需要头像是停留在菜单的空白处的。而且当鼠标停留在不管是菜单还是头像的时候永远会保持当前的停留效果，也就是头像放大、菜单出现的效果。

实现原理很简单，用到的就是css中hover选择器，用来选择鼠标指针漂浮在其上的元素，并设置其央视：

	.a:hover
	{ 
		background-color:yellow;
	}

表示的就是class="a"的组件在悬浮之后背景色变为黄色

step1：布局

如何判断hover时就是选中头像菜单和头像呢？
我是这样实现的。首先将头像和菜单两个进行绝对定位

	position:absolute;