버튼 호버 효과가 작동하지 않습니다.

Question

안녕하세요. 제 첫 번째 영어로 매우 유감입니다. 이 효과를 사이트에 추가하고 싶지만 작동하지 않습니다. 효과 이름은 왼쪽에서 슬라이드하지만 내용은 ""; 도움말 효과

<div class="button-wrapper"> 
<div class="button slideleft"><span>Slide from left</span></div> 

.button.slideleft:after { 
    content: ""; 
    backface-visibility: hidden; 
    background-color: #333; 
    border-radius: 50%; 
    height: 70px; 
    right: 100%; 
    position: absolute; 
    top: 50%; 
    transform-origin: 0% 50%; 
    transform: scale3d(1, 5, 1); 
    -webkit-transition: -webkit-transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1); 
    transition: -webkit-transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1); 
    transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1); 
    transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1); 
    width: 70px; 
    z-index: -1; 
} 
.button.slideleft:hover span { 
    color: white; 
} 
.button.slideleft:hover:after { 
    -webkit-transform: scale3d(5, 3.5, 1); 
      transform: scale3d(5, 3.5, 1); 
} 

this effect

링크를 작동하지

Answer 1

귀하의 <div class="button slideleft">은 position: relative의 부모 요소 스타일을 제공 그리워, position: absolute;의 스타일을 가지고있다. 이것을 CSS에 추가하십시오 :

.button-wrapper { 
    position: relative; 
    overflow: hidden; 
}