Добавить границу на mouseover

Question

Я хочу иметь границу стола (которую я могу установить с помощью css, а не встроенного атрибута border =), чтобы установить границу: 1px solid black; когда я навешиваю на стол таблицу.

Как это сделать в jQuery. Я думаю, что он идентичен тем, что происходит с кнопками в верхней части этой страницы (вопросы, теги, пользователи и т. Д.), За исключением того, что это div, который меняет цвет фона, тогда как я хочу изменить границу таблицы. Но концепция такая же.

Answer 1

для зависания эффектов, JQuery обеспечивает парения() псевдо-событие, которое ведет себя лучше, чем moueseenter/MouseLeave. Кроме того, это хорошая идея, чтобы создать класс CSS для каждого состояния (нормальный и парил), а затем изменить класс по наведению:

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

Ваш CSS может выглядеть следующим образом:

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

Answer 2

Отметьте эту статью на 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

Это может быть лучше поменять классы на столе вместо изменения свойств CSS непосредственно - это было бы более масштабируемым/расширяемым решение:

table { 
    border:0; 
} 

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

конечно вашей таблица будет «прыгать» в положении 1px, когда й е добавляется граница поэтому, возможно, лучше использовать запас или белую границу, когда вы не парящий:

table { 
    border:1px solid #fff; 
} 

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

Или еще лучше, если вы не должны быть совместимы с IE6 вы можете делать все это с чистым CSS:

table { 
    border:1px solid #fff; 
} 

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

Это был бы лучший/простейший/масштабируемый подход!

Answer 4

В качестве альтернативы, «контур» в отличие от «границы» не займет лишнего места в макете элементов.