【发布时间】：2015-07-19 10:58:09
【问题描述】：
我有一堆元素，它们有 50% 的边界半径来制作一个圆圈，并在其中旋转一个元素，这些元素被边界半径和“溢出：隐藏”属性裁剪。
在这里，一切都好。
我遇到的问题是当我将鼠标悬停在忽略裁剪的任何元素上并显示忽略溢出属性的其他伪元素时。我在 Firefox 上试过，没问题，但在 Chrome 上我无能为力。
<html>
<head>
<title></title>
<style>
.products {
margin: 0 auto;
max-width: 1280px;
text-align: center;
}
.post__product {
width: 260px;
height: 260px;
margin: 0 20px 5em;
overflow: hidden;
-webkit-border-radius: 50%;
border-radius: 50%;
position: relative;
display: inline-block;
-webkit-transition: all 250ms linear;
-moz-transition: all 250ms linear;
-o-transition: all 250ms linear;
-ms-transition: all 250ms linear;
transition: all 250ms linear;
}
.post__product:hover {
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
.post__product .rotated-element {
z-index: 0;
width: 300px;
right: -90px;
height: 200px;
bottom: -50px;
overflow: hidden;
position: absolute;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
background-color: rgba(33,38,41,0.5);
}
.post__product .title {
right: 0;
bottom: 0;
z-index: 1;
position: absolute;
}
.post__product .title h2 {
font-weight: 300;
}
</style>
</head>
<body>
<section class="products">
<a href="#" class="post post__product">
<article>
<img src="http://www.dinamiclifestyle.com/marmol-verde.jpg" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://www.dinamiclifestyle.com/marmol-verde.jpg" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://www.dinamiclifestyle.com/marmol-verde.jpg" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://www.dinamiclifestyle.com/marmol-verde.jpg" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://www.dinamiclifestyle.com/marmol-verde.jpg" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://www.dinamiclifestyle.com/marmol-verde.jpg" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
</section>
<!-- .products -->
</body>
</html>我已经为此做了一支笔：http://codepen.io/anon/pen/pJggxP
提前谢谢你，如果我犯了任何错误，请原谅我的英语。
【问题讨论】：