Как стилизовать родительский элемент при наведении курсора на дочерний элемент?

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



чтобы привести пример: рассмотрим a удалить что при наведении выделит элемент, который вот-вот будет удален:



<div>

    <p>Lorem ipsum ...</p>

    <button>Delete</button>

</div>


С помощью чистого CSS, как изменить цвет фона этого раздела, когда мышь находится над кнопкой?

591   8  

8 ответов:

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

но в большинстве случаев, когда этот эффект желателен, как в данном примере, все еще существует возможность использовать эти каскадные характеристики для достижения желаемого эффекта. Считайте это псевдо разметка:

<parent>
    <sibling></sibling>
    <child></child>
</parent>

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

Теперь, как стиль брата?

когда ребенок завис, родитель тоже, но брат не. То же самое касается и брата. Это завершается тремя возможными путями селектора CSS для стилизации родного брата:

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

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

div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}

Style parent image example

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

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

110  
2011-11-14 10:26:26

Я знаю, что это старый вопрос, но мне просто удалось сделать это без псевдо-ребенка (но псевдо-обертку).

если вы установите родителя, чтобы быть с no pointer-events, а потом ребенка div С pointer-events значение auto, это работает:)
Обратите внимание, что <img> тег (например) не сделать трюк.
Также не забудьте установить pointer-events до auto для других детей, которые имеют свой собственный прослушиватель событий, или в противном случае они потеряют свою кнопку функциональность.

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}    
<div class="parent">
  parent - you can hover over here and it won't trigger
  <div class="child">hover over the child instead!</div>
</div>

Edit:
Как Тень Мастера любезно отметил: стоит отметить, что это не будет работать для IE10 и ниже. (Старые версии FF и Chrome тоже, см. здесь)

62  
2018-09-30 13:16:44

нет селектора CSS для выбора родителя выбранного ребенка.

вы можете сделать это с помощью JavaScript

8  
2011-11-13 22:55:31

другой, простой подход (старый вопрос)..
было бы разместить элементы в качестве братьев и сестер и использовать:

Селектор Соседних Братьев И Сестер (+) или Общий Селектор Братьев И Сестер (~)

<div id="parent">
  <!-- control should come before the target... think "cascading" ! -->
  <button id="control">Hover Me!</button>
  <div id="target">I'm hovered too!</div>
</div>

#parent {
  position: relative;
  height: 100px;
}

/* Move button control to bottom. */
#control {
  position: absolute;
  bottom: 0;
}

#control:hover ~ #target {
  background: red;
}

enter image description here

демо скрипка здесь.

5  
2017-12-30 22:12:58

Как упоминалось ранее, "нет селектора CSS для выбора родителя выбранного ребенка".

Так ты тоже:

вот пример javascript / jQuery решение

на стороне javascript:

$('#my-id-selector-00').on('mouseover', function(){
  $(this).parent().addClass('is-hover');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover');
})

и на стороне CSS, вы бы есть что-то вроде этого:

.is-hover {
  background-color: red;
}
4  
2017-05-23 15:10:38

это решение полностью зависит от дизайна, но если у вас есть родительский div, который вы хотите изменить фон при наведении на ребенка вы можете попробовать, чтобы имитировать родителей с ::after/::before.

<div class="item">
    design <span class="icon-cross">x</span>
</div>

CSS:

.item {
    background: blue;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.item span.icon-cross:hover::after {
    background: DodgerBlue;
    border-radius: 10px;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
}

Смотрите полный пример скрипки здесь

2  
2018-04-23 12:02:55

Я нахожу наиболее удобным и легким для меня быть что-то вроде этого:

CSS

.main-nav > li:hover > a {
  background: #000;
}

здесь

HTML

<ul class="main-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a>
        <ul class="main-sub-nav">
            <li><a href="#">About Sub 1</a></li>
            <li><a href="#">About Sub 2</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>
-1  
2018-01-02 16:57:27

Это очень легко сделать в Sass! Не углубляйтесь в JavaScript для этого. И селектор в Sass делает именно это.

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand

-5  
2016-03-16 02:16:34

Comments

    Ничего не найдено.
Click here to cancel reply.