Как при наведении на один объект изменить свойства другого в css

При наведении курсора на дочерний элемент измените цвет фона родительского контейнера (только CSS)

Дубликат делает хорошую работу, указывая на то, что родительские элементы не могут быть нацелены на CSS. Но он практически не дает никаких указаний для первоначального вопроса, который может быть пойман в проблеме XY .

В данном конкретном случае.

Как можно изменить цвет фона родителя при наведении курсора на ребенка?

..существует по крайней мере одно решение CSS, которое может решить эту проблему.

3 ответа

Так что у меня есть несколько HTML таких: <a title=my tool tip> Hover over me for a tool tip! </a> javascript изменяет html на что-то вроде этого: <a Hover over me for a tool tip! <span style=position:absolute; display:none;>my tool.

как изменить свойства родительского div при наведении курсора на дочерний div. можно ли это сделать с помощью pure css ? html : <div <div </div> </div> css : .parent.

Используя только pointer-events и :hover

Совместимость событий указателя: caniuse.com . Протестировано на IE 11 и Edge, Chrome и Firefox.

Установите pointer-events: none на div. Div теперь будет игнорировать :hover .

Установите родительский фон для изменения при наведении курсора

Установите pointer-events: auto для дочернего элемента, чтобы событие наведения вызывалось только при наведении на дочерний элемент

Это работает, потому что div зависает, когда его дочерний элемент зависает, и события указателя активируются с помощью auto только на этом дочернем элементе. В противном случае родитель игнорирует свой псевдокласс наведения.

Пример

Примечание: IE 11 и Edge требуют, чтобы дочерний элемент был display: inline-block или display: block для работы событий указателя.

Хотя вы не можете выбрать родительские элементы с помощью CSS, вы можете выполнить эту задачу с помощью другого метода.

Вы хотите, чтобы цвет фона родителя менялся при наведении курсора на ребенка.

Рассмотрите возможность использования значения spread-radius свойства CSS box-shadow .

Создавая огромный радиус распространения, вы можете изменить цвет окружающей области (которая визуально ничем не отличается от родительского элемента).

  1. overflow: hidden для ограничения тени ящика ребенка
  2. значения box-shadow следующие:

<box-shadow> : <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

В этом случае первые три значения не имеют значения.

Что вам нужно, так это чтобы spread-radius сильно вырос, а затем его обрезали контейнером с overflow: hidden .

А что, если в контейнере есть еще один элемент?

Вы можете применить z-index к родному брату.

И поскольку в этом примере элементы находятся в контейнере flex, их не нужно располагать для работы z-index .

Другой подход, если вы просто хотите изменить фон родительского элемента,-это подделать его псевдо-элементом, рассмотрим эту структуру:

Только с помощью CSS2 я хочу изменить цвет фона родителя при наведении мыши на его дочерний элемент, и любое тело может мне помочь. Я использую div в качестве родителя и span в качестве ребенка при наведении мыши на child span я хочу изменить цвет фона parent div

У меня есть мега меню, которое показывает выпадающие меню при наведении курсора на родительское меню и при наведении курсора на выпадающие подменю, а затем показывает соответствующую информацию, связанную с меню, в контейнере div с классом dd-panel Я меняю цвет фона подменю при наведении на.

Похожие вопросы:

Я пытаюсь изменить свойства родительского элемента при наведении курсора на дочерний элемент. Вот мой HTML <div <div <a href=#.

Я знаю , что не существует родительского селектора CSS, но можно ли стилизовать родительский элемент при наведении курсора на дочерний элемент без такого селектора? Чтобы привести пример: рассмотрим.

Я возился с чистым выпадающим меню CSS и заметил, что при наведении курсора на верхний элемент <li> он показывает стиль кнопки, но при наведении курсора на дочерний элемент <li> в.

Так что у меня есть несколько HTML таких: <a title=my tool tip> Hover over me for a tool tip! </a> javascript изменяет html на что-то вроде этого: <a >
как изменить свойства родительского div при наведении курсора на дочерний div

как изменить свойства родительского div при наведении курсора на дочерний div. можно ли это сделать с помощью pure css ? html : <div <div </div>.

Только с помощью CSS2 я хочу изменить цвет фона родителя при наведении мыши на его дочерний элемент, и любое тело может мне помочь. Я использую div в качестве родителя и span в качестве ребенка при.

У меня есть мега меню, которое показывает выпадающие меню при наведении курсора на родительское меню и при наведении курсора на выпадающие подменю, а затем показывает соответствующую информацию.

У меня есть таблица, в которой все ячейки в каждой строке окрашены в синий цвет. Я хочу добиться того, чтобы при наведении курсора на строку все ячейки в этой строке меняли цвет на желтый. Я уже.

Я хочу изменить цвет фона дочернего div при наведении курсора родительского div. В настоящее время я могу изменить цвет, но только при наведении курсора на дочерний div. Тем не менее, я хочу, чтобы.

Как при наведении на один элемент (hover) менять стили другого элемента css?

Есть вертикальный блок навигации, список, в каждом <li> лежит картинка и заголовок.
Цель: при наведении мышки на элемент списка -> изменять картинку.
Как изменять саму картинку при наведении на нее — я знаю, мне нужно, чтобы наводя на один элемент->изменялся другой.

Но он как я понял, работает он только ID, т.е. работает только с одним <li>, и создавать кучу id как-то не очень.

Как при наведении на один элемент, менять стили другого элемента css?
Здравствуйте! Возник вопрос. Как при наведении на один елемент, изменять стили остальных.

Как имитировать событие hover элемента А при наведении на элемент Б?
&lt;div &lt;div &lt;div .

Установить значение css hover для другого элемента
Ребят, подскажите пожалуйста такую вещь. Например есть структура: &lt;div &lt;div.

Как отредактировать стили элемента при динамичексом изменении css
В общем такая проблема. На сайте когда открываю код элемента, он постоянно обновляется и не дает.

Сообщение от Strikeby

потому что предназначено для изменения конкретного элемента
без конкретного кода html не понятно что нужно, какой список, какая картинка, как они расположены относительно друг друга?

Strikeby, в редакторе есть куча кнопочек для выделения кода, иначе не читабельно

Лучший ответСообщение было отмечено Strikeby как решение

Решение

Сообщение от Strikeby

CSS — почему :hover при наведении курсора не берет всю область под указанный ему цвет
Добрый день всем! За ранее благодарен тому кто откликнется. :hover не берет всю область под.

можно ли менять id элемента при наведении?
Здравствуйте. Такая проблема. Есть большой скрипт, который ссылается на элемент с ИДом. Но мне.

Записать два элемента одного массива, как один элемент другого
Здравствуйте) есть такое задание: нужно составить таблицу истинности(дискретная математика). И в.

Мигает флеш при hover другого элемента
в опере и яндекс браузере при наведении на картинку (клиента) мигает флешка логотипа.

CSS: нужно чтобы при наведении мыши на один элемент изменялось свойство другого элемента

Как средствами CSS сделать так, чтобы при наведении мыши на один элемент изменялось свойство другого элемента? Если возможно, желательно CSS, если нет — то на JS.

Можно и через CSS3.
Используя терминологию предыдущего ответа, код будет примерно таким:

В фигурных скобках прописываем параметры анимации изменения и изменяемые свойства. Есть только два условия, при которых этот способ будет работать:

  1. ЦЕЛЬ и ЖЕРТВА должны быть братьями (то есть иметь общий родительский элемент).
  2. ЖЕРТВА в коде должна быть ниже ЦЕЛИ.

Через CSS нельзя. А в скрипте — первая строчка — присваивает свойство при наведении, вторая — возвращает как было, потому кавычки должны остаться пустыми. Вместо "ЦЕЛЬ" подставь id элемента, на который наводишь мышь, вместо "ЖЕРТВА" — id того, который должен измениться.

Если CSS-свойство состоит из одного слова, так его и дописываешь вместо "СВОЙСТВО".

Если из двух, например background-color, vertical-align , то меняешь на формат backgroundColor verticalAlign

То есть, первое слово без изменений, тире убираешь и первую букву второго слова пишешь в верхнем регистре. Если слов больше — так же поступаешь с продолжением. вот пример:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *