Как менять бекграунд у фонового квадрата при наведении?
Приветствую всех. Есть проблемка, мне нужно менять цвет у фонового квадрата при наведении на него.
Этого удалось добиться путём генерации квадратов и добавлении их в секцию в абсолюте. При этом контейнеру добавлен z-index выше, чем квадратам.
Естественно при наведении ничего не меняется, поэтому контейнеру пришлось добавить pointer-events: none.
Но мне хочется сохранить нативное поведение, чтобы текст можно было выделить...
Вот о чем речь (скриншот не снял мышку, она сейчас над текстом, в соответствующем квадрате)
Может подскажите, как ловить ховер мыши, на слое у которого z-index меньше (не думаю, что возможно :( )
Или другое решение, может есть библиотека какая, с помощью которой это можно сделать,
или у вас есть пример, как это реализовать (искал, ничего не нашёл)...
Заранее спасибо...
----------------------------------
Залил на кодепен
https://codepen.io/asokr/pen/ZEPdWxK
Дополнительно:
На codepan покажи верстку. Через js точно можно сделать.
Я понимаю, что можно...идею бы...:)
Ответы:
Думаю квадрат нужно поместить внутрь блока с текстом, чтобы задействовать наведение родителя:
.container:hover .box {...}
- Квадраты должны быть во всей секции.
Залил в песочницу, то, что имеем, и как должно быть, только нужно чтобы текст вел себя как текст...
https://codepen.io/asokr/pen/ZEPdWxK
Пришлось подумать. Единственный вариант который сработал это следить за mousemove в родительском контейнере и динамически вычислять какой квадрат надо подсвечивать.
https://codepen.io/yepbro/pen/LYaKRPp
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения фона квадрата при наведении мы можем использовать CSS и псевдокласс :hover.
Вот пример кода на HTML и CSS:
.square { width: 100px; height: 100px; background-color: blue; transition: background-color 0.3s; /* Добавляем плавный переход */ } .square:hover { background-color: red; } <div class="square"></div>.square { width: 100px; height: 100px; background-color: blue; transition: background-color 0.3s; /* Добавляем плавный переход */ } .square:hover { background-color: red; } <div class="square"></div>
В данном примере у нас есть квадрат с классом "square", который имеет синий фон. При наведении на квадрат с помощью псевдокласса :hover мы изменяем его фон на красный. Также добавлено свойство transition для плавного перехода цвета фона.
Вы можете изменить цвета и размеры квадрата, а также продолжительность перехода, чтобы адаптировать этот пример под ваши нужды. Надеюсь, это поможет вам решить вашу проблему!