오버플로 : 숨김; 전환 요소에

Question

here (바이올린)을 볼 수 있듯이 a은 부모이며 overflow: hidden;으로 설정됩니다. span은 자식이며 box-shadow 집합입니다. 아무 일도 일어나지 않으면 모든 것이 잘 진행되지만 사용자가 a을 가리키면 그 overflow 속성이 덮어 쓰여진 것처럼 보입니다. 즉 그림자는 사각형이 아닌 사각형에 표시됩니다. 어떤 생각이 어떻게 해결할 수 있습니까?

코드 : HTML

<a href="#" title="Hover me"><span>Hover me</span></a> 

CSS

a { 
    overflow: hidden; 
    width: 52px; 
    height: 52px; 
    top: 0; 
    display: block; 
    position: relative; 
    margin: 50px; 
    background: red; 

    -webkit-transition: all 300ms linear; 
    -moz-transition: all 300ms linear; 
    -ms-transition: all 300ms linear; 
    -o-transition: all 300ms linear; 
    transition: all 300ms linear; 

    border-radius: 200px; 
    opacity: 0.6; 
} 

a:hover { 
    opacity: 1; 
    top: -8px; 
} 

a > span { 
    width: 100%; 
    height: 100%; 
    display: block; 
    box-shadow: inset 0 -35px 10px rgba(0,0,0,0.8); 
} 

a:hover > span { 
    box-shadow: inset 0 -28px 10px rgba(0,0,0,0.8); 
} 

Answer 1

귀하의 질문에 understable 아니라 그것은 당신을 도울 수 있다면 이것을 시도 ....

a { 
    overflow: hidden; 
    width: 52px; 
    height: 52px; 
    top: 0; 
    display: block; 
    position: relative; 
    margin: 50px; 
    background: red; 

    -webkit-transition: all 300ms linear; 
    -moz-transition: all 300ms linear; 
    -ms-transition: all 300ms linear; 
    -o-transition: all 300ms linear; 
    transition: all 300ms linear; 

    border-radius: 200px; 
    opacity: 0.6; 
} 

a:hover { 
    overflow: hidden; 
    opacity: 1; 
} 

a > span { 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    display: block; 
    box-shadow: inset 0 -35px 10px rgba(0,0,0,0.8); 
} 

a:hover > span { 
    overflow: hidden; 
    box-shadow: inset 0 -28px 10px rgba(0,0,0,0.8); 
}