Ajouter une bordure au passage de la souris - jquery, survoler, survoler

Je souhaite qu'une bordure de table (que je peux définir à l'aide de CSS, plutôt que l'attribut inline border) soit définie sur border: 1px solid black; quand je passe la souris sur la table.

Comment puis-je faire cela dans jQuery. Je pense que cela est identique à ce qui se passe avec les boutons en haut de cette page (Questions, Tags, Utilisateurs, etc.), sauf que la couleur de l’arrière-plan change, alors que je veux changer la bordure du tableau. Mais le concept est le même.

Réponses:

Pour les effets de survol, jQuery fournit le survol ()pseudo-événement, qui se comporte mieux que moueseenter / mouseleave. En outre, c’est une bonne idée de créer une classe CSS pour chaque état (normal et survolé), puis de changer de classe en survol:

$(document).ready(function() {
$("#tableid").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
});

Votre CSS pourrait ressembler à ceci:

table.Hover { border: 1px solid #000; }

Il peut être préférable d’échanger les classes sur la table plutôt que d’éditer directement les propriétés CSS - ce serait une solution plus évolutive / extensible:

table {
border:0;
}

table.border {
border:1px solid #000;
}

Bien sûr, votre table "sautera" en position 1px lorsque la bordure sera ajoutée, il est donc préférable d’utiliser une marge ou une bordure blanche lorsque vous ne survolez pas:

table {
border:1px solid #fff;
}

table.border {
border:1px solid #000;
}

Ou mieux encore, si vous n’avez pas besoin de vous conformer à IE6, vous pouvez tout faire avec du CSS pur:

table {
border:1px solid #fff;
}

table:hover {
border:1px solid #000;
}

Ce serait l'approche la meilleure / la plus simple / la plus évolutive!

Découvrez cet article sur le événements mouseenter et mouseleave.

$("table#mytable").mouseenter(function(){
$("table#mytable",this).css("border", "solid 1px black");
}).mouseleave(function(){
$("table#mytable",this).css("border", "o");
});

Sinon, "contour" par opposition à "bordure" ne prendra pas d'espace supplémentaire dans la présentation de l'élément.