Can not get : 작업 전환 후

: pseudo-element에서 작동하도록 불투명 전환을 얻지 못했지만 : before 요소에서 동일한 전환이 완벽하게 작동합니다. 어떤 도움을 주셔서 감사합니다!Can not get : 작업 전환 후

.top-nav li a:hover:after { 
    content: "/"; 
    display: inline-block; 
    opacity: 1; 
    transition: opacity 0.2s; 
    margin-left: 10px; 
} 

.top-nav li a:after { 
    content: "/"; 
    display: inline-block; 
    opacity: 0; 
    transition: opacity 0.2s; 
    margin-left: 10px; 
    position: absolute; 
} 

.top-nav li a:hover:before { 
    content: "/"; 
    display: inline-block; 
    opacity: 1; 
    transition: opacity 0.2s; 
    margin-right: 10px; 
} 

.top-nav li a:before { 
    content: "/"; 
    display: inline-block; 
    opacity: 0; 
    transition: opacity 0.2s; 
    margin-right: 10px; 
}

출처

2017-11-18 CMYKey

당신의 CSS를 사용하여 표시됩니다 리튬에 폭을 제공하기 위해 노력의 양 : 전 : 전환 작업 후. 놀이에 다른 요인이 있어야합니다. 한 가지 가능성은 인접한 버튼이 더 높은 z- 인덱스에 배치되고 after : 내용을 가린다는 것입니다. 버그를 재현 한 테스트 사례를 줄일 수 있습니까? 탐색 레이아웃과 HTML 마크 업을 제어하는 CSS를 보는 것이 도움이됩니다. –

다음은 이전 글에서 겹쳐진 가능성을 보여주는 피들입니다. https://jsfiddle.net/k9euprr4/3 번째 및 4 번째 목록 항목이 이웃을 어떻게 가리는 지 확인하십시오. : after 가상 컨텐트가 여전히 존재하며, 인접한 버튼 뒤에 그냥 숨겨져 있습니다. –

이 작업은 다음 그것은 내 테스트에서

.top-nav li a:hover:after { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 1; 
 
    transition: opacity 2s; 
 
    margin-left: 10px; 
 
    
 
} 
 

 
.top-nav li a:after { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 0; 
 
    transition: opacity 0.2s; 
 
    margin-left: 10px; 
 
    position: absolute; 
 
} 
 

 
.top-nav li a:hover:before { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 1; 
 
    transition: opacity 0.2s; 
 
    margin-right: 10px; 
 
} 
 

 
.top-nav li a:before { 
 
    content: "/"; 
 
    display: inline-block; 
 
    opacity: 0; 
 
    transition: opacity 0.2s; 
 
    margin-right: 10px; 
 
} 
 

 
.top-nav { 
 
    list-style: none; 
 
} 
 
.top-nav li { 
 
    float: left; 
 
    position: relative; 
 
    background:white; 
 
    width:85px; 
 
    text-align:center; 
 
}

<ul class="top-nav"> 
 
<li><a href="#">One</a></li> 
 
<li><a href="#">Two</a></li> 
 
<li><a href="#">Three</a></li> 
 
<li><a href="#">Four</a></li> 
 
</ul>

출처

2017-11-18 04:09:30 Gattbha

답변

관련 문제