Утверждение «при наведении курсора на класс меняется цвет другого класса» можно понимать как запрос на предоставление нескольких методов для изменения цвета одного класса при наведении курсора на другой класс. Вот несколько подходов, которые вы можете рассмотреть:
-
CSS с селектором смежного уровня:
.class1:hover + .class2 { color: red; }
В этом методе при наведении курсора на
.class1
цвет.class2
изменится на красный. -
CSS с общим селектором одноуровневых элементов:
.class1:hover ~ .class2 { color: blue; }
Этот метод изменит цвет
.class2
на синий при наведении курсора на.class1
. -
JavaScript с прослушивателями событий:
<script> document.querySelector('.class1').addEventListener('mouseover', function() { document.querySelector('.class2').style.color = 'green'; }); document.querySelector('.class1').addEventListener('mouseout', function() { document.querySelector('.class2').style.color = ''; // Revert to default color }); </script>
Этот метод использует JavaScript для добавления прослушивателей событий, определяющих наведение курсора на
.class1
. Затем он меняет цвет.class2
на зеленый и возвращает его к цвету по умолчанию, когда указатель мыши удаляется. -
jQuery с методом
.hover()
:<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('.class1').hover( function() { $('.class2').css('color', 'orange'); }, function() { $('.class2').css('color', ''); // Revert to default color } ); }); </script>
Этот метод использует библиотеку jQuery для достижения того же результата, что и предыдущий метод JavaScript.