溢出：隐藏;正在转换元素

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); 
}