Question

我有一堆具有50％边界半径的元素，可以通过border-radius和'overflow：hidden'属性创建一个圆圈和一个旋转元素。

在这里没事。

我遇到的问题是当我将鼠标悬停在任何忽略裁剪的元素上时，并显示忽略overflow属性的其他伪元素。我尝试过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>

我已经制作了一支笔：documentation

如果我犯了任何错误，请提前谢谢你，对不起我的英语。

Answer 1

尝试添加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>

其他伪元素在悬停时忽略父'overflow：hidden'

1 个答案: