父元素遮住子元素的问题

这是一种样式实现方法，可能存在问题，做个笔记方便以后看

为两部分，第一部分橘色是parent，蓝色是children

hover时候，children出现

效果图：

原理实现：

.header .gwc{margin-right: 98px;background-color: #fff;float: right;margin-top: -60px;border: 1px solid #e3e4e5;color: #f10215;line-height: 35px;text-align: center;font-size: 12px;width: 190px;position: relative;

} .header .gwc:hover{ 　　　　border-color:#ccc; 　　　　border-bottom: 2px solid #fff;      用白色的变遮住下面子元素灰色的边，实现不规则图形描边 }

　　子元素：

.header .gwc:hover .gwc_box{display: block;
}
.header .gwc_box{display: none;position: absolute;width: 310px;height: 70px;border: 1px solid #ccc;bottom: -70px;right: -1px;box-sizing: border-box;padding: 10px;z-index:-1;必须为负值 父级元素才会显现上来background-color: #fff;
}

　　这样就完成了

hover

转载于:https://www.cnblogs.com/GoTing/p/7225965.html

父元素遮住子元素的问题相关推荐

jquery 同级元素下的子元素_jq 获取所有父级元素及同级元素及子元素的方法(推荐)...
1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id&quo ...
jQuery获取所有父级元素及同级元素及子元素的方法
jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...
[css] css中padding和margin是相对于父元素还是子元素呢？
[css] css中padding和margin是相对于父元素还是子元素呢? padding就是往自己身体里塞东西(盒子里面),margin就是穿衣服(盒子外面). ==>padding相对于子 ...
[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
[css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...
HTMl文件的阶层架构访问父元素和子元素
<html> <head> <title>访问父元素和子元素</title> <script language="JavaScript& ...
父元素与子元素的width关系
第一部分:父子元素都是内联元素代码演示如下: <!DOCTYPE html> <html> <head><title>fortest</titl ...
jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
jquery获取元素（父级的兄弟元素的子元素）
一.获取父级元素使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素使用jquery获取同级元素:siblings() 例如:$(t ...
Vue中获取当前点击元素的父元素、子元素、兄弟元素
Vue如何获取当前点击元素? 获取父元素.子元素.兄弟元素呢? 通过帮定点击事件: 例如: <button class="shanchu" @click="shan ...

父元素遮住子元素的问题

父元素遮住子元素的问题相关推荐

最新文章

热门文章