Rahmen bei mouseover hinzufügen

Question

Ich möchte einen Tabellenrahmen (den ich mit css anstelle des Attributs inline border = festlegen kann) auf den Rahmen setzen: 1px solid black; wenn ich mit der Maus über den Tisch gehe.

Wie gehe ich dabei in jQuery. Ich denke, es ist identisch mit dem, was mit den Schaltflächen oben auf dieser Seite passiert (Fragen, Tags, Benutzer usw.), außer dass es ein div ist, dessen Hintergrundfarbe sich ändert, während ich den Rand einer Tabelle ändern möchte. Aber das Konzept ist das gleiche.

Answer 1

Für Schweben Effekte stellt die jQuery Hover() Pseudo-Ereignis, das als mouseleave moueseenter/besser verhält. Außerdem ist es eine gute Idee, eine CSS-Klasse für jeden Zustand (normal und schwebte), zu erstellen und dann die Klasse auf schweben ändern:

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

Ihre CSS könnte wie folgt aussehen:

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

Answer 2

Überprüfen Sie diesen Artikel auf der mouseenter and mouseleave events.

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

Answer 3

Es kann besser sein, Klassen auf dem Tisch direkt von der Bearbeitung der CSS-Eigenschaften, anstatt zu tauschen - das ist ein skalierbarer/ausfahrbaren Lösung wäre:

table { 
    border:0; 
} 

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

natürlich ‚springt‘ Tisch in Position 1px wenn th e Grenze wird so vielleicht hinzugefügt, es ist besser Rand verwenden oder einen weißen Rand, wenn Sie nicht schweben: noch

table { 
    border:1px solid #fff; 
} 

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

Oder am besten, wenn Sie mit IE6-konform sein müssen Sie nicht alles mit rein tun können CSS:

table { 
    border:1px solid #fff; 
} 

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

Dies wäre der beste/einfachste/skalierbare Ansatz!

Answer 4

Alternativ kann "Umriss" im Gegensatz zu "Rahmen" keinen zusätzlichen Platz im Elementlayout einnehmen.