使用绝对定位制作商城里的鼠标悬停效果

一、实验要求

做一个"手机"的标签,当鼠标移动到"手机"上后,显示右边的白色菜单,当鼠标离开"手机"时,菜单消失

二、实验思路

  1. 制作大的背景图
  2. 制作手机标签
  3. 制作要显示的内容
  4. 设置悬停

三、实验步骤



	
		
		
		
	
	
		
手机
xiaomi MIx系列
Xiaomi数字系列
XiaomiCivi系列
Redmi K系列
Redmi Note系列
Redmi数字系列
电视
小米电视LED
小米电视大师系列
小米电视S系列
小米电视EA系列
Redmi电视MAX系列
Redmi电视A系列

四、效果展示

使用绝对定位制作商城里的鼠标悬停效果_第1张图片

使用绝对定位制作商城里的鼠标悬停效果_第2张图片

难点:

1.“子绝父相”子标签相对定位时父标签要绝对定位

2.鼠标悬停时要显示的和不悬停时要隐藏的关系理清,这样才能做出想要的效果

你可能感兴趣的:(javascript,前端,css)