0
我想在懸停在我的列表元素（或者我的錨點標籤在這些列表元素中）時創建一個過渡效果。僞元素::隱藏同胞元素的內容之前
不幸的是，當我使用我創建的transition :: :: before僞元素（或者:: after，我不確定）隱藏技術上它的同級內容是什麼，那是錨標籤中的文本。
我試着在ul，li和一個標籤上操作z-index無濟於事。這個問題可能出現在我對位置的使用中：絕對在我的轉換中，但我無法知道我做錯了什麼。
這裏的HTML和CSS和JSFiddle link
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>
什麼是您所希望達到的過渡？ – Ryan
@Ryan OP的轉換是在鏈接懸停時隱藏鏈接文本。 – disinfor
該問題的可重複片段應該出現在問題本身*中。請修改您的問題以包含複製問題所需的所有代碼，最好是作爲可運行的SO-snippet。 *（不是像JSFiddle這樣的外部資源）* – Santi