jQuery Border Image (en haut à gauche, en haut à droite, en bas à gauche, en bas à droite)

Question

Je crée un site Web et lorsque l'utilisateur survole un produit, je souhaite lui donner une bordure en haut à gauche , en haut à droite, en bas à gauche et en bas à droite. Comme les propriétés CSS border-top-left-image ont été dépréciées il y a des années, la seule autre solution à cela serait d'utiliser JS. Actuellement, mon idée est que je vais utiliser span avec une classe d'icônes et ensuite ajouter les quatre spans sur hover puis les retirer du DOM, est-ce la meilleure solution pour cela ou y a-t-il quelque chose de plus simple où je ne joins pas quatre travées et les enlever chaque fois qu'un produit est plané, voici mon code actuel dis-moi ce que tu penses et tout conseil serait génial, merci d'avance!

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

Vous devriez essayer de nœuds réutiliser avant c les battre/les enlever. Le moins de JavaScript doit s'engager avec le DOM le plus rapide, et plus lisse votre animation et l'UX sera. Puisque vous ne récupérez aucune information dynamique sur l'événement hover, vous pouvez simplement mettre les éléments .icon dans votre code HTML initial, avec une propriété display: none. Et soit en CSS ou en utilisant JS show/hide sur hover. De même, les scripts bloquent le chargement de la page, ce qui a un impact sur les performances, ce qui dépend de la longueur de votre script.

Par exemple.

(Ajout à votre CSS existant)

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

Si vous souhaitez une plus grande flexibilité avec votre animation, vous pouvez utiliser Javascript à la place du CSS que j'ai fourni.

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

}); 

En outre, il va sans dire si vous pouvez éviter l'utilisation d'éléments vides dans votre code html et utiliser l'un ou les propriétés de CSS, vous pouvez, soit background de border-image comme vous l'avez mentionné, puis qui être préférentiel, moins d'éléments DOM est une meilleure performance et maintenabilité, et les éléments purement présentés doivent être évités si possible pour la sémantique (séparation de la présentation du contenu).

la compatibilité du navigateur va évidemment être un facteur:

• border-image. caniuse.com
• multiactivités « backgroundcaniuse.com