2

Есть две ссылки. Как сделать так, чтоб при наведении на любую из них подсвечивались обе? В один контейнер их поместить нельзя, они разбросаны по странице.

UPD: Вот как это выглядит.

HTML:

<a href="/" class="eye1">Глаз 1</a>
<a href="/" class="eye2">Глаз 2</a>

CSS:

a {opacity: 0;}
a:hover {opacity: 1 !important;} 
.eye1:hover ~ .eye2 {opacity: 1 !important;}

При наведении курсора на .eye1 появляется .eye2, но не наоборот. А надо, чтоб работало в две стороны.

3
  • дайте больше данных. в противном случае, что вам мешает прописать для выбранных классов :hover? Если имеет место динамическое добавление ссылок с генерируемыми классами - это другой вопрос. Минимальный пример не помешает. 19 мар 2018 в 19:30
  • Так ведь если прописывать :hover, при наведении будет подсвечиваться только ссылка, на которую навели. 20 мар 2018 в 9:02
  • Отредактировал, добавил пример. 20 мар 2018 в 9:12

3 ответа 3

2

Такой простенький скрипт без использования библиотек.

Класс подсветки highlight настраивается в стилях.

Соединяются все элементы с заданным классом, в данном случае class1.

ColorBind("class1");

function ColorBind(className) {

  var ells = document.getElementsByClassName(className);

  var highlightToggle = function() {
    var all = document.getElementsByClassName(className);

    for (var el1 of all) {
      el1.classList.toggle("highlight");
    }
  }

  for (var el of ells) {
    el.addEventListener("mouseover", highlightToggle);
    el.addEventListener("mouseout", highlightToggle);
  }
}
.highlight {
  background-color: red;
  color: white;
}
<a href="#" class="class1">Человек</a>
<a href="#" class="class1">Лось</a>
<a href="#" class="class2">Тигр</a>
<p>
  Дружно могут жить
</p>
<a href="#" class="class1">Собака</a>

1

при наведении на ссылку выполнять поиск всех ссылок и уже выполнять с ними действия, если я, правильно понял

1
  • Правильно. Но как это реализовать на JS? Я, если что, полный ноль. Подскажите, пожалуйста. 20 мар 2018 в 8:59
0

могу предложить для примера jQuery

$('a').hover(function () {
    $('a').css({"color": "red"});
},function () {
    $('a').css({"color": "black"});
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.