悬停子元素时如何设置父元素的样式？

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

#1 楼

好吧，这个问题之前已经被问过很多次了，最简短的典型答案是：纯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}
 

显然，在大多数情况下，此技巧取决于绝对定位的使用，以使兄弟姐妹具有与父对象相同的大小，并仍然允许子对象出现在父对象中。
< br有时，有必要使用更合格的选择器路径来选择特定元素，如此小提琴所示，该小提琴在树形菜单中多次实现了该技巧。真的很好。

#2 楼

我知道这是一个老问题，但是我设法做到了没有伪子对象（而是伪包装器）。

如果将父级设置为不带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;
}     

编辑：
正如Shadow Wizard亲切指出的：值得一提的是，这不适用于IE10及以下版本。 （也有FF和Chrome的旧版本，请参见此处）

#3 楼

另一种更简单的方法（针对一个老问题）。
将元素放置为兄弟姐妹并使用：

相邻兄弟选择器（+）
或
常规兄弟选择器（~）

 <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;
}
 

演示小提琴在这里。

#4 楼

没有用于选择所选子项的父项的CSS选择器。

您可以使用JavaScript进行选择

#5 楼

如前所述，“没有CSS选择器可用于选择所选孩子的父母”。
因此，您可以：

使用CSS hack，如NGLN的答案所述
使用javascript -最有可能与jQuery一起使用的


这里是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;
}

#6 楼

此解决方案完全取决于设计，但是如果您有一个要在悬停孩子时更改背景的父级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: "";
}

在此处查看完整的小提琴示例

#7 楼

适用于不需要纯CSS解决方案的人的简单jquery解决方案：

     $(".letter").hover(function() {
      $(this).closest("#word").toggleClass("hovered")
    }); 

 .hovered {
  background-color: lightblue;
}

.letter {
  margin: 20px;
  background: lightgray;
}

.letter:hover {
  background: grey;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="word">
  <div class="letter">T</div>
  <div class="letter">E</div>
  <div class="letter">S</div>
  <div class="letter">T</div>
</div> 

#8 楼

这在Sass中非常容易做到！请勿深入研究JavaScript。 sass中的＆选择器完全可以做到这一点。

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