Подчеркните гиперссылку при наведении курсора с помощью jQuery

Question

Я использовал метод

$("#dvTheatres a").hover(function (){
        $(this).css("text-decoration", "underline");
    },function(){
        $(this).css("text-decoration", "none");
    }
);

Есть ли более элегантный метод? (Одна строка)

Answer 1

Почему бы просто не использовать CSS?

#dvTheatres a {
    text-decoration: none;
}

#dvTheatres a:hover {
    text-decoration: underline;
}

Answer 2

У вас могут быть проблемы с другими правилами CSS, которые переопределяют те, которые вы хотите. Даже если он объявлен последним в файле, другие объявления могут иметь большее значение, и, следовательно, ваши будут игнорироваться. например:

#myDiv .myClass a {
    color: red;
}
#myDiv a {
    color: blue;
}

Поскольку первое правило более конкретно , оно имеет приоритет. Вот страница, объясняющая специфику CSS: http://www.htmldog.com/guides/cssadvanced/specificity/

Причина, по которой работает ваше решение jQuery, заключается в том, что применение стиля с помощью параметра style="" имеет очень высокую специфичность.

Лучший способ узнать, какие правила применяются, а какие отменяются другими, - это использовать расширение Firebug для Firefox. Осмотрите элемент в нем и нажмите на вкладку CSS: она покажет вам каждое объявление CSS, которое применяется, и зачеркнет те, которые отменяются.

Если вы хотите действительно быстрый и простой способ решения вашей проблемы, попробуйте следующее:

#dvTheatres a:hover {
    text-decoration: underline !important;
}

---

Если вы действительно хотите придерживаться jQuery, ваш метод в порядке и, возможно, самый элегантный способ сделать это (используя jQuery).

Answer 3

Нет хорошего ответа, но, возможно, вы просто ищете альтернативы. Одним из них является использование именованной функции (и CSS) вместо выражения намерения, а не встраивание необработанных команд.

Сценарий

function toggleUnderline() { $(this).toggleClass('underline') };
$("#dvTheatres a").hover(toggleUnderline, toggleUnderline);

CSS

.underline { text-decoration: underline; }

Answer 4

Дайте этому попытку

$('.my-awesome div a').hover().css('text-decoration', 'none');