其他僞元素會忽略懸停時父級的'overflow：hidden'

我有一堆元素具有50％的邊界半徑，可以將圓形和旋轉元素放入邊界半徑和「溢出：隱藏'財產。其他僞元素會忽略懸停時父級的'overflow：hidden'

在這裏沒關係。

我遇到的問題是，當我將鼠標懸停在任何忽略裁切的元素上，並顯示忽略溢出屬性的其他僞元素。我嘗試過使用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

謝謝你提前和對不起我的英語水平，如果我做了什麼差錯。

來源

2015-05-08 Miguel Morera

嘗試添加z-index：2;到.post__product

我認爲，這個問題是相關的：Bug with transform: scale and overflow: hidden in 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; 
 
      z-index: 2; 
 
     } 
 
     .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>

來源

2015-05-08 13:48:14

謝謝斯坦尼斯洛斯！它解決了我的問題！ –

其他僞元素會忽略懸停時父級的'overflow：hidden'

回答

相關問題