css z-index높이
본문
아래와 같은 소스를 실행하면
테스트 라는 버튼에 마우스 오버시 배경 :before 를 에니메이션 시켜주는데요.
근데.. 글씨는 흰색으로 반전을 해야합니다.
이때 :before 의 높이가 text 보다 위에 올려져 있어서 문제인데요.
z-index:-1 로 :before 를 주면 .aaa 요소의 background-color:#dddddd 보다 낮아서 안보이게됩니다.
어떻게 하는게 좋을까요?
<style>
.aaa{display:block;position:relative;color:red;width:200px;height:50px;background-color:#dddddd}
.aaa::before{content:'';position:absolute;left:0;top:0;width:0%;height:100%;transition:all .4s;background-color:#414141;}
.aaa:hover:before{width:100%;}
.aaa:hover{color:#ffffff}
</style>
<a href="" class="aaa">테스트</a>
답변 2
before 값이 넓이가 없으므로 aaa에 호버했을때 100% 넓어지면서
마우스가 before 값으로 올라가기 때문에 호버가 풀리는 것 같은데요 ?
aaa에 z-index:10 을 줬다는 가정하에 before는 z-index:9 이하 값으로 설정하여 위치를 잡아주세요.
감사합니다^^
aaa{z-index:1}
aaa:before{z-index:-1}
이렇게 비포에 마이너스값으로 넣어보세요
감사합니다~
