Ajout d'attributs CSS hover via jQuery / Javascript
Certains styles CSS doivent être appliqués à un élément sur hover, et les styles CSS doivent être appliqués en utilisant javascript / jquery directement et non via des feuilles de style ou $(this).addClass('someStyle') parce que j'injecte les éléments DOM dans une autre page.
Nous pouvons appliquer les styles css habituels en utilisant
$('#some-content').css({
marginTop: '60px',
display: 'inline-block'
});
Comment ajouter les styles CSS pour les événements :hover?
Devons-nous recourir à:
$('#some-content').hover(
function(){ $(this).css('display', 'block') },
function(){ $(this).css('display', 'none') }
)
4 réponses
Je trouve que l'utilisation de mouseenter et mouseleave est meilleure que hover. Il n'y a plus de contrôle.
$("#somecontent").mouseenter(function() {
$(this).css("background", "#F00").css("border-radius", "3px");
}).mouseleave(function() {
$(this).css("background", "00F").css("border-radius", "0px");
});
Essayez ceci:
$('#some-content').hover(function(){
$(this).css({ marginTop: '60px', display: 'inline-block' });
}, function(){
$(this).css({ //other stuff });
});
Ou en utilisant les classes
$('#some-content').hover(function(){
$(this).toggleClass('newClass');
});
Plus d'infos ici .hover() et .toggleClass()
Vous devriez les mettre dans un événement hover :
var elem = $('#elem');
elem.hover(function () {
// ... :hover, set styles
}, function () {
// ... this function is called when the mouse leaves the item, set back the
// normal styles
});
Cependant, je recommande complètement de mettre votre CSS dans les classes et d'utiliser ces classes dans JS, vous devriez diviser les langues autant que vous le pouvez.