[英]Pseudo Element ::before Hiding Sibling Element's Content
我想在將鼠標懸停在我的列表元素上時創建一個過渡效果（或者我的錨點標記在這些列表元素中）。
不幸的是，當我使用我創建的轉換時，:: before偽元素（或者:: after，我不確定）隱藏了技術上它的兄弟內容，即錨標簽中的文本。
我試過操縱ul，li和標簽上的z-index無濟於事。 問題可能在於我使用的位置：在我的過渡中是絕對的，但我不知道我做錯了什么。
這是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>
得到母體li一個z-index ，然后使用z-index: -1偽元件上推動它的后面a ，但是，從頂部li 。
你還需要關閉你的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>
為什么通用兄弟組合器允許切換偽元素的內容，而不是相鄰的兄弟？
[英]Why does the general-sibling combinator allow toggling pseudo-element's content, but not the adjacent-sibling?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.