Juste une recommandation, il est normalement préférable de cacher plutôt que de détruire, les navigateurs vous en seront reconnaissants.
Pourquoi? Lorsque vous désactivez le bloc d'affichage ou qu'aucun bloc ne se bloque, le navigateur doit détruire l'élément et le restituer. Lorsque vous le cachez, le navigateur doit simplement le positionner.
HTML
<a href="#"><div class="hover-img">
Show Image
<span><img src="http://placehold.it/150x150" alt="image" height="100" /> </span>
</div></a>
CSS
a .hover-img {
position:relative;
}
a .hover-img span {
position:absolute; left:-9999px; top:-9999px; z-index:9999;
}
a:hover .hover-img span {
top: 20px;
left:0;
}
Voir fonctionner https://jsfiddle.net/b5Lvq7yL/
D'autre part, étant donné que vous souhaitez utiliser javascript afin de le rendre plus réutilisable et maintenable, Je vous suggère de combiner l'idée avec un CSS générique et de le considérer comme quelque chose que vous voudrez probablement utiliser plus tard pour d'autres sections du logiciel (ou d'autres ojects)
En fait, vous pouvez généraliser.
Vous pouvez avoir un sélecteur de trigger ".onhover-toggle-child-class", qui prend son enfant de "data-target" et bascule les classes dans "data-toggle" à chaque fois que la souris entre et sort ..
En utilisant le même code HTML que vous avez, mais d'autres classes CSS
<div>
<a href="#" class="relative onhover-toggle-child-class" data-target=".target" data-toggle="hidden shown">Show Image
<span class="absolute target hidden on-top">
<img src="http://placehold.it/150x150" alt="image" height="100" />
</span>
</a>
</div>
<div>
<a href="#" class="relative onhover-toggle-child-class" data-target=".target2" data-toggle="hidden shown">Show Image
<span class="absolute target2 on-top hidden">
<img src="http://placehold.it/150x150" alt="image" height="100" />
</span>
</a>
</div>
Certains CSS super générique.
.on-top {
z-index: 99;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.shown {
display: block;
}
.hidden {
display: none;
}
Et javascript (en utilisant jQuery)
$('.onhover-toggle-child-class').on(
'mouseenter mouseleave',
function() {
var element = $(this);
var selector = element.data('target');
var child = element.find(selector);
var classes = element.data('toggle');
child.toggleClass(classes);
}
);
Ou, si vous souhaitez utiliser vainilla javascript:
var queried = document.querySelectorAll('.onhover-toggle-child-class');
var elements = Array.prototype.slice.call(queried);
var onhover = function(event) {
var element = event.srcElement || event.target;
var selector = element.getAttribute('data-target');
var classes = element.getAttribute('data-toggle').split(' ');
var childs = element.querySelectorAll(selector);
//console.log(selector, classes, childs);
childs.forEach(function(child) {
classes.forEach(function(toggleClass) {
if (child.classList.contains(toggleClass))
child.classList.remove(toggleClass);
else
child.classList.add(toggleClass);
});
});
}
elements.forEach(function(element) {
element.addEventListener('mouseenter', onhover);
element.addEventListener('mouseleave', onhover);
});
Voir les exemples de travail: https://jsfiddle.net/kg22ajm6/
Vous peut créer des classes qui utilisent l'opacité: 0 et l'opacité: 1 afin de rendre le "fadeIn" nd "fadeOut". CSS est normalement un meilleur choix que JavaScript ou jQuery brut, fadeIn et fadeOut de jQuery animent manuellement et les transitions CSS sont intégrées dans les navigateurs.
Vérifiez l'exemple en utilisant l'animation d'opacité: https://jsfiddle.net/Lwcbn0ae/1/
Cordialement,
Je crois que cela nécessiterait trop de code et de maintenance manuelle. Comment ça va? –