javascript - jQuery 边框图像(左上、右上、左下、右下)

Question

我正在构建一个网站，当用户将鼠标悬停在产品上时，我想为该图像设置左上角、右上角、左下角和右下角的边框。由于 CSS 属性 border-top-left-image 在多年前就被弃用了，唯一的其他解决方案就是使用 JS。目前我的想法是，我将使用 span 和一个图标类，然后在悬停时附加四个 span，然后将它们从 DOM 中删除，这是最好的解决方案，还是有更简单的方法，我不附加四个 span 和每次悬停产品时删除它们，这是我当前的代码告诉我你的想法和任何建议都很好，提前致谢!

CSS

.icon {
    background: url("../images/theme/icons.png");
    overflow: hidden;
    width: 1.6em;
    height: 1.6em;
    position: absolute; 
}


.top-left {
    top: 0; 
    left: 0;
    background-position: -11.2em 24em;
}

.top-right { 
    top: 0;
    right: 0;
    background-position: -1.6em 24em;
}

.bottom-left { 
    bottom: 0;
    left: 0;
    background-position: -8em 24em;
}

.bottom-right { 
    bottom: 0;
    right: 0;
    background-position: -4.8em 24em;
}

HTML

<div class="layout-product">
    <a href="http://www.mysite.com/product/lorem-ipsum-1">
        <div class="product-image">
             <img src="http://www.mysite.com/images/thumbnail/lorem-ipsum-1.jpg" alt="">
        </div>
    </a>
</div>

jQuery

$('.layout-product').hover(function() { 

    $(this).find('.product-image').append('<span class="icon top-left"></span>'

        + '<span class="icon top-right"></span>'
        + '<span class="icon bottom-left"></span>'
        + '<span class="icon bottom-right"></span>'
    );

}, function() {

    $('.icon').remove();
});

Answer 1

您应该在创建/删除节点之前尝试重新使用它们。 JavaScript 与 DOM 的交互越少，动画和用户体验就越流畅。由于您没有检索有关悬停事件的任何动态信息，您只需将 .icon 元素放入您的初始 html 中，并使用 display: none 属性。在 CSS 中或使用 JS 在悬停时显示/隐藏。脚本还会阻止页面加载，因此在一定程度上它们会影响性能，这显然取决于脚本的长度。

例如。

(添加到您现有的 CSS)

/* Default */
.layout-product .icon {
  display: none;
}

.layout-product:hover .icon {
  display: block; /* or inline-block or whatever you like that isn't none */
}

HTML

<div class="layout-product">
  <a href="http://www.mysite.com/product/lorem-ipsum-1">
    <div class="product-image">
      <img src="http://www.mysite.com/images/thumbnail/lorem-ipsum-1.jpg" alt="">
      <span class="icon top-left"></span>
      <span class="icon top-right"></span>
      <span class="icon bottom-left"></span>
      <span class="icon bottom-right"></span>
    </div>
  </a>
</div>

如果您希望动画具有更大的灵 active ，您可以使用 Javascript 代替我提供的 CSS。

JavaScript

// I have used a toggle which means it applies for both .mouseenter and .mouseleave 
// which the .hover function alias. If you pass one function rather than two it will
// Use that function for both events. Customize as you like.
$('.layout-product').hover(function(e) { 

  $(this).find('.icon').fadeToggle();

});

此外，如果您可以避免在 html 中使用空元素并尽可能使用任何 css 属性，无论是 background 还是 border-image 都不言而喻提到，那么这将是优先的，DOM 元素越少，性能和可维护性越好，并且在语义可能的情况下应避免纯粹的表示元素(将表示与内容分开)。

浏览器兼容性显然是一个因素:

• 边框图像。 caniuse.com
• 多个背景的caniuse.com