Функция jQuery css (), изменяющая свойство «a», а не «a: hover»

Question

У меня сейчас проблемы с функцией jQuery css(). Он меняет значение css border-top-color элемента привязки вместо просто элемента border-top-color элемента привязки при наведении курсора. Ниже мой код.

$("#header #headerlist li a:hover").css("border-top-color","rgb(225, 149, 79)");

Почему он изменяет свойства #header #headerlist li a border-top-color и #header #headerlist li a:hover, а не только свойство #header #headerlist li a:hover?

Answer 1

Причина, по которой ваш пример не работает, заключается в том, что селектор не может обнаружить: hover, поскольку это чисто CSS. Вместо этого вы можете попробовать использовать метод jquery hover :

$("#header #headerlist li a").hover(
  function () {
    $(this).css("border-top-color", "#FF0000");
  }, 
  function () {
    $(this).css("border-top-color", "#000000");
  }
);

В качестве альтернативы, вы также можете использовать метод addclass:

$("#header #headerlist li a").hover(
  function () {
    $(this).addClass('hover-highlight');
  }, 
  function () {
    $(this).removeClass('hover-highlight');
  }
);

Это может быть дополнительно упрощено до:

$("#header #headerlist li a").hover(function () {
    $(this).toggleClass('hover-highlight');
});

Answer 2

Я не знаю точно, почему, но этот тип изменений лучше сделать в CSS, поэтому я предлагаю, чтобы, если вам действительно нужно изменить это через JS, создать класс CSS, а затем изменить это в JS.

CSS

#header #headerlist li a.fancy-border:hover{
  border-top-color: rgb(225, 149, 79);
}

JS

$("#header #headerlist li a").addClass("fancy-border");

Таким образом вы можете лучше отделить функциональность от презентации.

Answer 3

Причина, по которой он не работает, заключается в том, что бит :hover на самом деле не предоставляет селектору никакой информации об элементе.

a:hover в CSS совпадает с теми же точными элементами, что и a, он просто определяет другой набор свойств, когда пользователь наводит курсор на эти элементы.

Селектор jQuery предназначен для поиска (выбора) элементов, а не их оформления.

Метод css() просто устанавливает встроенный стиль для выбранных элементов, он не добавляет или изменяет любые фактические объявления CSS.

Как уже упоминалось, вы можете использовать событие hover(), чтобы получить то же поведение. Хотя добавление класса на лету, вероятно, лучше, как описал другой автор.

Однако, если вам не нужно вносить изменения на лету, я рекомендую использовать старый CSS, поскольку он работает быстрее и не требует, чтобы пользователь включил JavaScript.

Answer 4

add! Важно, чтобы hover css избегал переопределения стиля. например:

test:hover {
    border: 1.5px solid white !important;
    color: white !important;
}

Answer 5

Этот код не работает с 1.9

if($('...').is(':hover')){
  $(this).css('set','your styles here')
}

используйте это вместо

var class = '...';
if($(class+':hover').length>0){
  $(class).css('set','your styles here');
}