Для того, чтобы подсветка заработала для каждого блока отдельно при наведении мыши на блок, необходимо внести следующие изменения в код:
1. Присвоить уникальные идентификаторы (например, классы) каждому блоку, для которого вы хотите активировать подсветку при наведении мыши. Например, если у вас есть несколько блоков <div>
со стилями, вы можете добавить класс "highlightable" ко всем блокам, которые требуют подсветки.
<div class="highlightable">Блок 1</div> <div class="highlightable">Блок 2</div> <div class="highlightable">Блок 3</div>
2. Написать код на JavaScript, который будет реагировать на событие наведения мыши на каждый блок с указанным классом. Для этого используйте метод addEventListener()
для каждого блока. В обработчике события вы должны добавить или удалять класс, который отвечает за подсветку блока. Например, вы можете использовать класс "highlight" для подсветки.
var highlightableBlocks = document.getElementsByClassName('highlightable'); for (var i = 0; i < highlightableBlocks.length; i++) { highlightableBlocks[i].addEventListener('mouseover', function() { this.classList.add('highlight'); }); highlightableBlocks[i].addEventListener('mouseout', function() { this.classList.remove('highlight'); }); }
3. Добавить стили для класса "highlight", чтобы обозначить подсвеченный блок с помощью, например, другого фона или границы.
.highlight { background-color: yellow; }
Когда вы выполните все эти изменения, каждый блок с классом "highlightable" будет подсвечиваться при наведении мыши на него, а подсветка будет применяться только к текущему блоку, который находится под указателем мыши.