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  即使设置子元素也无效

 

posted @ 2018-05-16 13:45  瘦子先生  阅读(1022)  评论(0编辑  收藏  举报