jQuery, устанавливающий элемент css "color" другого элемента, переопределяет его псевдокласс при наведении курсора

#html #jquery #css #hover #pseudo-class

#HTML #jquery #css #наведите #псевдокласс

Вопрос:

Я хотел, чтобы один элемент выделялся либо при наведении курсора, либо при наведении курсора на какой-либо другой элемент. Тем не менее, код, который я написал для достижения этого, похоже, переопределяет псевдокласс при наведении всякий раз, когда он запускается. Кажется, я не понимаю, почему — минимальный пример в этой скрипке: https://jsfiddle.net/mLynfz3x /

Как только второй элемент зависает, псевдокласс при наведении для первого удаляется, и я не уверен почему. Предполагается ли, что .css() функция jQuery переопределяет псевдоклассы? Или проблема в чем-то другом, что я полностью пропустил

Спасибо!

1. Псевдоэлементы не являются частью DOM , поэтому их нельзя изменить или вернуть в исходное состояние с помощью jQuery или Javascript. Как только вы наводите на них курсор, .css получает полный контроль над элементом.

2. @AlwaysHelping именно поэтому я не понимаю, как код jQuery / js каким-то образом удаляет или отключает мои псевдоэлементы

3. Правильно! .css удалит элемент и не будет прослушивать псевдоэлемент, определенный для этого элемента.

4. альтернатива тому, что я собирался добавить здесь (см. Также Ответ ниже), внесла бы что-то !important в ваш CSS — но лично мне не нравится добавлять !important, если только это не является супер необходимым.

5. Я полностью согласен с @AlwaysHelping здесь, потому что он переопределяет существующий CSS, и это просто не очень «чисто». Обычно я создаю класс с желаемым эффектом, и если я хочу добиться изменений css с помощью jQuery, я использую .addClass() и .removeClass() или .toggleClass (), чтобы изменить применяемый css без получения избыточного кода

Ответ №1:

Установленный цвет для элемента Testlink не отключает псевдокласс при наведении, фиксированный цвет для этого элемента является просто, скажем, «более высоким приоритетом». Итак, все, что вам нужно сделать, чтобы исправить это, это добавить:

 #testLink:hover {
  color: olive !important;
}

и это должно работать с вашим существующим jQuery.

1. Это вызвано тем фактом, что .css () добавляет встроенный стиль к вашему элементу, и это имеет более высокий приоритет, чем таблицы стилей, если это объясняет ваш вопрос

Ответ №2:

Это то, что я сделал

 $("#aTestItem").hover(() => {
  $("#testLink").css("color", "olive");
}, () => {
  $("#testLink").css("color", "black");
});

$("#testLink").hover(() => {
  $("#testLink").css("color", "olive");
}, () => {
  $("#testLink").css("color", "black");
});