伪元素::隐藏兄弟元素的内容之前
[英]Pseudo Element ::before Hiding Sibling Element's Content
问题描述
I want to create a transition effect when hovering over my list element (or alternatively my anchor tags within these list elements). 
我想在将鼠标悬停在我的列表元素上时创建一个过渡效果（或者我的锚点标记在这些列表元素中）。
Unfortunately, when I use my created transition the ::before pseudo-element (or the ::after, I'm not sure) are hiding what is technically its sibling content, that being the text within the anchor tags. 不幸的是，当我使用我创建的转换时，:: before伪元素（或者:: after，我不确定）隐藏了技术上它的兄弟内容，即锚标签中的文本。
I've tried manipulating the z-index on the ul, li and a tags to no avail. 我试过操纵ul，li和标签上的z-index无济于事。 The problem likely lies within my use of position: absolute in my transitions but I can't tell what I'm doing wrong. 问题可能在于我使用的位置：在我的过渡中是绝对的，但我不知道我做错了什么。
Here's the HTML and CSS and a JSFiddle link 这是HTML和CSS以及JSFiddle链接
html, body { height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; } #headercontainer { background-color: #4f2f65; height: 125px; position: relative; } #headercontainer ul { height: 100%; display: table; text-align: center; list-style: none; margin: 0; padding: 0; } #sitelogo { padding-top: 0px; } #headercontainer ul li { display: table-cell; vertical-align: middle; position: relative; } #headercontainer ul li a { color: #fff; font-size: 20px; text-decoration: none; } a::before { content: ''; display: block; height: 0px; background-color: #fff; position: absolute; bottom: 0; width: 100%; transition: all ease-in-out 200ms; } a:hover::before { height: 125px; } header::after { content: ''; display: table; clear: both; } #headerlinkslist a:hover { color: red; } .headerlinks { padding-left: 80px; padding-right: 80px; }
<body> <header> <div id="headercontainer"> <ul id="headerlinkslist"> <li id="sitelogo"></li> <li><a href="" class="headerlinks">RULES</a></li> <li><a href="" class="headerlinks">NEWS</a></li> <li><a href="" class="headerlinks">STATS</a></li> <li><a href="" class="headerlinks">SUBMIT</a></li> <li><a href="" class="headerlinks">LOGIN / REGISTER</a></li> </div> </header> </body>
1 个解决方案
解决方案1
3 已采纳 2017-07-06 17:36:56
give the parent li a z-index , then use z-index: -1 on the pseudo element to push it behind the a but on top of the li . 得到母体li一个z-index ，然后使用z-index: -1伪元件上推动它的后面a ，但是，从顶部li 。
You also need to close your ul 你还需要关闭你的ul
html, body { height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; } #headercontainer { background-color: #4f2f65; height: 125px; position: relative; } #headercontainer ul { height: 100%; display: table; text-align: center; list-style: none; margin: 0; padding: 0; } #sitelogo { padding-top: 0px; } #headercontainer ul li { display: table-cell; vertical-align: middle; position: relative; z-index: 1; } #headercontainer ul li a { color: #fff; font-size: 20px; text-decoration: none; transition: color .25s; } a::before { content: ''; display: block; height: 0px; background-color: #fff; position: absolute; bottom: 0; width: 100%; transition: all ease-in-out 200ms; z-index: -1; } a:hover::before { height: 125px; } header::after { content: ''; display: table; clear: both; } #headerlinkslist a:hover { color: red; } .headerlinks { padding-left: 80px; padding-right: 80px; }
<body> <header> <div id="headercontainer"> <ul id="headerlinkslist"> <li id="sitelogo"></li> <li><a href="" class="headerlinks">RULES</a></li> <li><a href="" class="headerlinks">NEWS</a></li> <li><a href="" class="headerlinks">STATS</a></li> <li><a href="" class="headerlinks">SUBMIT</a></li> <li><a href="" class="headerlinks">LOGIN / REGISTER</a></li> </ul> </div> </header> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.