jQuery Border Image（左上，右上，左下，右下）

Question

I'm building a website and when the user hovers over a product I want to give that image a border of the top-left, top-right, bottom-left and bottom-right. As the CSS properties border-top-left-image were deprecated years ago the only other solution to this would be to use JS. Currently my idea is that I'll use span with an icon class and then append the four spans on hover then remove them from the DOM, is this the best solution for this or is there something simpler where I'm not appending four spans and removing them every time a product is hovered, here's my current code tell me what you think and any advice would be great, thanks in advance!

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

You should try to re-use nodes before creating/removing them. The less JavaScript has to engage with the DOM the faster, and hance smoother your animation and the UX will be. Since you're not retrieving any dynamic information on the hover event you can just put the .icon elements into your initial html, with a display: none property. And either in CSS or using JS show/hide on hover. Also scripts block page load, so to an extent they impact performance, obviously depending on the length of your script.

Eg.

(Adding to your existing 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>

If you would like greater flexibility with your animation you could use Javascript instead of the CSS I provided.

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

});

Also it goes without saying if you could avoid the use of empty elements in your html and use whichever css properties you can, either background of border-image as you mentioned, then that would be preferential, less DOM elements is better performance and maintainability, and purely presentational elements should be avoided where possible for semantics (separation of Presentation from Content).

Browser compatibility is obviously going to be a factor:

• border-image . caniuse.com
• multiple background 's caniuse.com