javascript - jQuery Border Image (左上、右上、左下、右下)

Question

私はウェブサイトを構築しています。ユーザーが製品の上にカーソルを置いたときに、その画像に左上、右上、左下、右下の境界線を付けたいと考えています。CSS プロパティborder-top-left-imageは何年も前に廃止されたため、これに対する他の唯一の解決策は JS を使用することです。現在、私の考えでは、アイコンクラスでスパンを使用し、ホバー時に4つのスパンを追加してDOMから削除します。製品がホバーされるたびにそれらを削除します。これが私の現在のコードです。あなたの考えを教えてください。どんなアドバイスも素晴らしいでしょう、事前に感謝します!

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