Добавить границу при наведении курсора

Question

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

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

Answer 1

Для эффектов зависания jQuery предоставляет псевдо-событие hover (), которое работает лучше, чем 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

Может быть лучше поменять классы на таблице, чем редактировать свойства 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 3

В качестве альтернативы, "контур" в отличие от "границы" не будет занимать дополнительное место в макете элемента.

Answer 4

Ознакомьтесь с этой статьей о событиях mouseenter и mouseleave .

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