Выделение блока на странице

140

15 января 2020, 02:50

У меня есть страница, и если в css прописать:

*:hover{
   background:rgba(255,215,215,0.2);
}

то вместе с блоком , над которым находится курсор, подсвечивается и родительский блок.
Внимание! Вопрос: "Как сделать так, чтобы выделялся только тот блок, над которым курсор?" Заранее благодарю за помощь.

Answer 1

Решил через js + jQuery.

var info = {}; //Объект для информации о предыдущем элементе.
$('body').mousemove(function(e){ //Ставим эвент на движение мышью
if (info.tar !== e.target.id ){ //Если предыдуший элемент не текущий, то:
    if(e.target.id == null) return; //Если у элемента под курсором нет id, то выходим из функции
    if(info.tar !== undefined) $('#'+info.tar).css('background-color', info.color); //Если предыдуший элемент существует (человек уже поводил мышью по странице), то восстанавливаем цвет фона предыдущего элемента в дефолт.
    info.tar = e.target.id; //Сохраняем элемент как предыдущий.
    info.color = $('#'+e.target.id).css('background-color'); //Сохраняем дефолт цвет фона этого элемента.
    $('#'+e.target.id).css('background', 'rgba(255,215,215,0.2)'); //Устанавливаем цвет фона элементу
}
});