javascript - 将悬停叠加层应用于Woocommerce存档列表

我试图将悬停样式添加到产品页面上的woocommerce类别图像。

我创建了下面的代码，该代码可以正常工作，但是由于覆盖层“粘在一起”或彼此覆盖，不能正确切换等原因，因此效果很差。看来代码运行速度不够快

$('a.woocommerce-LoopProduct-link').on('mouseover', function() {
    $(this).parent('li').css({
        position: 'relative'
    });
    var img = $(this).children('img');
    $("<table id='overlay'><tbody><tr><td>" + 'SHOP NOW >' + "</td></tr></tbody></table>").css({
        "position": "absolute",
        "top": "0px",
        "left": "0px",
        "width": img.width(),
        "height": img.height(),
        "background-color": "rgba(0,0,0,.5)",
        "z-index": "10000",
        "vertical-align": "middle",
        "text-align": "center",
        "color": "#fff",
        "font-size": "1rem",
        "cursor": "pointer"
    }).on('mouseout', function() {
        $(this).fadeOut('fast', function() {
            $(this).remove();
        });
    }).insertAfter(this);
});

我想在CSS中使用它，但是我不能考虑可变图像的大小和覆盖层的内容。

最佳答案

如果将position: absolute top left bottom设置为零，则在这种情况下，不必在JavaScript right元素中执行此操作，而将其相对父级的全部宽度和高度设为动态值。当您可以使用伪元素时，甚至不需要额外的div。

与脚本相比，使用纯CSS进行覆盖对性能的影响要小得多。

ul.test {
  list-style: none;
}

ul.test li {
  position: relative;
  display: inline-block;
}

ul.test li a img {
  display: block;
}

ul.test li:before {
  content: 'SHOP NOW';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  color: #fff;
  font-size: 1.5rem;
  transition: all 0.5s ease;
  cursor: pointer;
  /*To align the content*/
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

ul.test li:hover::before {
  opacity: 1;
}

<ul class="test">
  <li>
    <a href="#" class="woocommerce-LoopProduct-link"><img src="https://www.qvb.com.au/images/phocagallery/thumbs/phoca_thumb_l_sample-200x200.png" alt=""></a>
  </li>
  <li>
    <a href="#" class="woocommerce-LoopProduct-link"><img src="http://www.omega4agents.com/wp-content/uploads/Sample-Gallery-1-200x300.jpg" alt=""></a>
  </li>
  <li>
    <a href="#" class="woocommerce-LoopProduct-link"><img src="http://demo.cloudimg.io/s/crop/200x400/http://sample.li/eiffel.jpg" alt=""></a>
  </li>
</ul>

关于javascript - 将悬停叠加层应用于Woocommerce存档列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43548537/