Html 悬停子元素时如何设置父元素的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8114657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style the parent element when hovering a child element?
提问by NGLN
I know that there does not exist a CSS parent selector, but is it possible to style a parenting element when hovering a child element without such a selector?
我知道不存在CSS parent selector，但是在没有这样的选择器的情况下悬停子元素时是否可以设置父元素的样式？
To give an example: consider a delete buttonthat when hovered will highlight the element that is about to become deleted:
举个例子：考虑一个删除按钮，当它悬停时会突出显示即将被删除的元素：
<div>
<p>Lorem ipsum ...</p>
<button>Delete</button>
</div>
By means of pure CSS, how to change the background color of this section when the mouse is over the button?
纯CSS的方式，当鼠标悬停在按钮上时，如何改变本节的背景色？
采纳答案by NGLN
Well, this question is asked many times before, and the short typical answer is: It cannot be done by pure CSS. It's in the name: Cascading Style Sheetsonly supports styling in cascading direction, not up.
嗯，这个问题之前被问过很多次了，简短的典型回答是：它不能通过纯 CSS 来完成。顾名思义：层叠样式表只支持层叠方向的样式，不支持向上。
Butin most circumstances where this effect is wished, like in the given example, there still is the possibility to use these cascading characteristics to reach the desired effect. Consider this pseudo markup:
但在大多数情况下，如在给定的示例中，希望这种效果，仍然有可能使用这些级联特性来达到所需的效果。考虑这个伪标记：
<parent>
<sibling></sibling>
<child></child>
</parent>
The trick is to give the sibling the same size and position as the parent and to style the sibling instead of the parent. This will look like the parent is styled!
诀窍是为兄弟姐妹提供与父母相同的大小和位置，并为兄弟姐妹而不是父母设置样式。这看起来像父级的样式！
Now, how to style the sibling?
现在，如何设计兄弟姐妹的样式？
When the child is hovered, the parent is too, but the sibling is not. The same goes for the sibling. This concludes in three possible CSS selector paths for styling the sibling:
当孩子被悬停时，父母也是，但兄弟姐妹不是。对于兄弟姐妹来说也是如此。这总结了三个可能的 CSS 选择器路径，用于设置兄弟样式：
parent sibling { }
parent sibling:hover { }
parent:hover sibling { }
These different paths allow for some nice possibilities. For instance, unleashing this trick on the example in the question results in this fiddle:
这些不同的路径允许一些不错的可能性。例如，在问题中的示例上使用这个技巧会导致这个小提琴：
div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}
Obviously, in most cases this trick depends on the use of absolute positioning to give the sibling the same size as the parent, ánd still let the child appear within the parent.
显然，在大多数情况下，这个技巧依赖于使用绝对定位来为兄弟姐妹提供与父级相同的大小，并且仍然让子级出现在父级中。
Sometimes it is necessary to use a more qualified selector path in order to select a specific element, as shown in this fiddlewhich implements the trick multiple times in a tree menu. Quite nice really.
有时需要使用更合格的选择器路径来选择特定元素，如在树菜单中多次实现该技巧的小提琴所示。真的很不错。
回答by guy_m
I know it is an old question, but I just managed to do so without a pseudo child (but a pseudo wrapper).
我知道这是一个老问题，但我只是在没有伪孩子（但伪包装器）的情况下设法做到了这一点。
If you set the parent to be with no pointer-events, and then a child divwith pointer-eventsset to auto, it works:)
Note that <img>tag (for example) doesn't do the trick.
Also remember to set pointer-eventsto autofor other children which have their own event listener, or otherwise they will lose their click functionality.
如果你设置父是没有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:
As Shadow Wizardkindly noted: it's worth to mention this won't work for IE10 and below. (Old versions of FF and Chrome too, see here)
编辑：
正如Shadow Wizard 所指出的：值得一提的是，这不适用于 IE10 及更低版本。（旧版本的 FF 和 Chrome 也是如此，请参见此处）
回答by Onur Y?ld?r?m
Another, simpler approach(to an old question)..
would be to place elements as siblings and use:
另一种更简单的方法（针对一个老问题）
是将元素作为兄弟元素放置并使用：
Adjacent Sibling Selector(+)or
General Sibling Selector(~)
<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;
}
回答by Kae Verens
there is no CSS selector for selecting a parent of a selected child.
没有用于选择所选子项的父项的 CSS 选择器。
you could do it with JavaScript
你可以用 JavaScript 做到
回答by Remy Lagerweij
As mentioned previously "there is no CSS selector for selecting a parent of a selected child".
如前所述“没有用于选择选定子项的父项的 CSS 选择器”。
So you either:
所以你要么：
- use a CSS hack as described in NGLN's answer
- use javascript - along with jQuery most likely
- 使用 NGLN 的回答中描述的 CSS hack
- 使用 javascript - 最有可能与 jQuery 一起使用
Here is the example for the javascript/jQuerysolution
这是javascript/jQuery解决方案的示例
On the javascript side:
在javascript方面：
$('#my-id-selector-00').on('mouseover', function(){
$(this).parent().addClass('is-hover');
}).on('mouseout', function(){
$(this).parent().removeClass('is-hover');
})
And on the CSS side, you'd have something like this:
在 CSS 方面，你会有这样的东西：
.is-hover {
background-color: red;
}
回答by Jan Mellstr?m
This solution depends fully on the design, but if you have a parent div that you want to change the background on when hovering a child you can try to mimic the parent with a ::after/ ::before.
这个解决方案完全取决于设计，但如果你有一个父 div，你想在悬停一个孩子时改变背景，你可以尝试用::after/模仿父 div ::before。
<div class="item">
design <span class="icon-cross">x</span>
</div>
CSS:
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: "";
}
回答by Sanogoals
A simple jquery solution for those who don't need a pure css solution:
对于那些不需要纯 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>回答by admazzola
This is extremely easy to do in Sass! Don't delve into JavaScript for this. The & selector in sass does exactly this.
这在 Sass 中非常容易做到！不要为此深入研究 JavaScript。sass 中的 & 选择器正是这样做的。
http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand
http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand
