hover和position共用出现的问题
hover 鼠标移入的样式
position 定位属性 包含 relative 相对定位 absolute 绝对定位为 fixed 固定定位
hover作用范围
可以实现自己样式的改变:使。.box背景颜色变红
.box:hover{background-color:red}
也可以实现包含关系的样式改变;鼠标移入.box 使其子元素.sox背静颜色变红
.box:hover .sox{ background:red};
实现兄弟元素样式变化;.sox与.box相邻并且兄弟关系;
.box:hover+.sox{background:red}====》延深兄弟的兄弟
.box:hover+.sox+.mox{background:red};
position: 定位中存在层级的概念 ;普通文档流层级z-index为0;
1.如果网页中所有元素全部设置定位且都有层级 hover只能作用到层级最大的元素;
如果网页中存在非定位元素 即网页中的元素层级含有大于等于0的元素;则hover只能作用在文档流及以上;
z-index<0 无法使用hover 事件;
2.具有包含关系的元素;且都有定位属性;
子元素的层级会依赖于父元素层级 即永远位于子元素上 子元素z-index=父元素z-index 即使设置子元素也无效