Javascript jQuery边框图像（左上、右上、左下、右下）

我正在创建一个网站，当用户将鼠标悬停在某个产品上时，我希望给该图像一个左上角、右上角、左下角和右下角的边框。由于CSS属性

边框左上方图像
在几年前就被弃用了，因此唯一的解决方案就是使用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;
}

/* 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="">
        </div>
    </a>
</div>

<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>



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();
});

$（'.layout product'）.hover（函数（）{
$（this）.find（'.product image'）.append（''
+ ''
+ ''
+ ''
);
}，函数（）{
$（'.icon'）.remove（）；
});
在创建/删除节点之前，应尝试重新使用节点。JavaScript与DOM的接触越少，速度就越快，hance会使您的动画和UX更加流畅。由于您没有检索悬停事件的任何动态信息，因此可以将
.icon
元素放入初始html中，并使用
display:none
属性。或者在CSS中，或者使用JS在悬停时显示/隐藏。脚本还会阻止页面加载，因此在一定程度上会影响性能，这显然取决于脚本的长度

例如

（添加到现有CSS中）

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>

<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>

另外，如果您可以避免在html中使用空元素，并使用您可以使用的css属性，如您所提到的
background
或
border image
，那么这将是首选，DOM元素越少，性能和可维护性越好，在语义上，应该尽可能避免纯粹的表现元素（表现与内容的分离）

浏览器兼容性显然将成为一个因素：


边框图像

多个
背景

它没有被弃用
border左上角图像
可用。它只能在旧浏览器上使用。感谢您的建议，您完全正确，将它们包含在HTML中会容易得多，但我试图避免这样做，因为为每个产品在DOM中添加四个元素只是为了一个悬停效果似乎有点过分，所以我在考虑创建一个透明的PNG，在角上加上边框img，然后把它覆盖在产品图片的顶部，你怎么看？再次感谢@Mitchellayzell是指使用CSS
border image
、
background
或html+CSS？这就是使用
background
我试图找到一种最简单的方法，将图标添加到产品的每个角落image@MitchellLayzell是的，我认为多个
background
将是一种方式，但你可能必须使用Modernizer来提供一个不错的后备方案，我在书中读到过。祝你好运