Question

我有以下设置：

 $('.home-cat-wrapper a').hover(function() {
   var this_left = parseFloat($(this).find('.product-sticker-image').data('left'));
   var this_right = parseFloat($(this).find('.product-sticker-image').data('right'));
   var left = 0;
   var right = 0;
   if (this_left > 21) {
     left = 2 * (this_left - 21);
   } else {
     left = 10;
   }
   if (this_right > 21) {
     right = 2 * (this_right - 21);
   } else {
     right = 10;
   }
   $(this).find('.product-sticker-image').css({
     'top': '0',
     'left': left + '%',
     'right': right + '%'
   });
   $(this).find('.home-page-category-hover').stop(true, false).fadeIn(200);
 }, function() {
   var this_top = $(this).find('.product-sticker-image').data('top');
   var this_left = $(this).find('.product-sticker-image').data('left');
   var this_right = $(this).find('.product-sticker-image').data('right');
   $(this).find('.product-sticker-image').css({
     'top': this_top,
     'left': this_left,
     'right': this_right
   });
   $(this).find('.home-page-category-hover').stop(true, false).fadeOut(200);
 });

.col-xs-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.home-page-category-box {
  padding: 0 20px;
  text-align: center;
  margin-bottom: 51px;
}
.home-cat-wrapper {
  background-color: #f0f0f0;
}
.home-page-category-heading {
  color: #ffffff;
  font-size: 13.1px;
  font-weight: 600;
  background: #000000;
  padding: 13px 0 10px;
}
.home-page-image-wrapper {
  position: relative;
}
.home-page-category-hover {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  display: none;
}
.home-page-category-hover span {
  color: #ffffff;
  font-size: 12.44px;
  background: url("../images/footer-background.jpg");
  font-weight: 600;
  padding: 13px 0;
  display: inline-block;
  width: 100%;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  -ms-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.category-image-wrapper {
  width: 100%;
  background: #f0f0f0;
  padding: 45px 0 65px;
  position: relative;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.category-sticker-container {
  position: relative;
}
.product-sticker-image {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: absolute;
}
.category-sticker-container > img {
  width: 100%;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.product-sticker-image img {
  padding: 0;
  width: 100%;
}
.home-cat-wrapper a:hover .category-image-wrapper {
  background: #ffffff;
}
.home-cat-wrapper a:hover .category-image-wrapper .category-sticker-container > img {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-xs-12 home-page-right-container">
  <div class="col-sm-3 col-xs-6 home-page-category-box" style="height: 450px;">
    <div class="home-cat-wrapper col-xs-12 category-3">
      <a href="http://weadmire.dx3webs.com/film.html">
        <div class="col-xs-12 home-page-category-heading" style="height: 41px;">Film</div>
        <div class="col-xs-12 home-page-image-wrapper">
          <div class="col-xs-12 category-image-wrapper">
            <div class="col-xs-12 category-sticker-container">
              <div class="product-sticker-image" data-top="17%" data-left="21%" data-right="21%" style="top: 17%; left: 21%; right: 21%;">
                <img src="http://weadmire.dx3webs.com/pub/media/catalog/product/a/l/alfred-hitchcock.png" alt="Film-artwork">
              </div>
              <img src="http://weadmire.dx3webs.com/pub/media/catalog/product/cache/1/image/400x/925f46717e92fbc24a8e2d03b22927e1/n/a/natural-white.png" alt="Film">
            </div>
          </div>
        </div>
        <div class="home-page-category-hover" style="display: block; opacity: 1;"><span>63 DESIGNS | SEE THEM</span>
        </div>
      </a>
    </div>
  </div>
  <div class="col-sm-3 col-xs-6 home-page-category-box" style="height: 450px;">
    <div class="home-cat-wrapper col-xs-12 category-4">
      <a href="http://weadmire.dx3webs.com/design-architecture.html">
        <div class="col-xs-12 home-page-category-heading" style="height: 41px;">Design &amp; Architecture</div>
        <div class="col-xs-12 home-page-image-wrapper">
          <div class="col-xs-12 category-image-wrapper">
            <div class="col-xs-12 category-sticker-container">
              <div class="product-sticker-image" data-top="17%" data-left="21%" data-right="21%" style="top: 17%; left: 21%; right: 21%;">
                <img src="http://weadmire.dx3webs.com/pub/media/catalog/product/a/d/admire-rio.png" alt="Design &amp; Architecture-artwork">
              </div>
              <img src="http://weadmire.dx3webs.com/pub/media/catalog/product/cache/1/image/400x/925f46717e92fbc24a8e2d03b22927e1/n/a/natural-white.png" alt="Design &amp; Architecture">
            </div>
          </div>
        </div>
        <div class="home-page-category-hover" style="display: none; opacity: 1;"><span>17 DESIGNS | SEE THEM</span>
        </div>
      </a>
    </div>
  </div>
</div>

当你将鼠标悬停在盒子上时，你可以看到有轻微的闪烁，T恤标识中出现一个闪烁，然后在悬停时发生同样的情况。我尝试了背面可见性和其他变换属性，但没有运气。我怎样才能摆脱这种闪烁？感谢。

fiddle

Answer 1

在这种情况下，您应该在transition: width 0.2s ease;上使用.category-sticker-container > img：

.category-sticker-container > img {
  width: 100%;
  -webkit-transition: width 0.2s ease;
  -moz-transition: width 0.2s ease;
  -ms-transition: width 0.2s ease;
  -o-transition: width 0.2s ease;
  transition: width 0.2s ease;
}

JSfiddle here

Answer 2

只需将z-index添加到.product-sticker-image课程即可。
查看demo

添加不透明度悬停过渡会使其他图像闪烁

2 个答案: