CSS - 悬停子元素时如何更改父元素？ [复制]答案

【问题标题】：CSS - how to change parent element when hovered child? [duplicate]CSS - 悬停子元素时如何更改父元素？ [复制]
【发布时间】：2014-12-07 10:55:23
【问题描述】：

我有这个结构：

<span class='user_name'>
  Peter Green <span class='remove_user'>X</span>
</span>

当悬停在.remove_user 时，我正在尝试更改.username 和.remove_user 的背景颜色。

有没有什么方法可以在不涉及 javascript 的情况下使用 CSS 来做到这一点？

谢谢

【问题讨论】：

不，没有。没有parent selector in CSS（还没有）。
@HashemQolami 这个怎么样？ - jsfiddle.net/znq01cwo
@MaryMelody 是的，但技术上它并没有选择我的意思的父元素。但是，这是 IMO 的一个很好的解决方法。

标签： jquery html css hover

【解决方案1】：

CSS4 有一个“！”选择器将样式应用于父级，使用目标允许选择蚂蚁或叔叔。

.user_name! .remove_user:hover{
   color: red; /* applied to parent .user_name element on .remove_user hover */
}

如果使用 jQuery，则有一个库允许使用此选择器。 https://github.com/Idered/cssParentSelector

然而 jquery 已经有一个父选择器 $(".remove_user:parent") 所以 cssParentSelector 不能帮助最小化 javascript 的使用。它只允许在支持 CSS4 时更容易过渡。

所以今天的选择是使用哪种类型的 javascript 来完成它。

【讨论】：

【解决方案2】：

正如@HashemQolami 所评论的，CSS 中还没有父选择器，但你可以试试这个：

JSFiddle - DEMO

#checkbox {
    left: -9999px;
    position: absolute;
}
#checkbox:hover + .user_name {
    background-color: #0f0;
}
.user_name {
    width: 400px;
    height: 200px;
    display: block;
    background: #f00;
}
#label {
    display: inline-block;
    background: #0f0;
    padding: 5px;
}
#label:hover {
    background: #f00;
}

<input type="checkbox" id="checkbox">
<span class='user_name'>
    Peter Green <span class='remove_user'><label for="checkbox" id="label">X</label></span>
</span>

或者：您可以像这样使用 jQuery 来实现这一点：

JSFiddle - DEMO

$('.remove_user').hover(function () {
    $(this).toggleClass('hover-1').parent('span.user_name').toggleClass('hover-2');
});

.user_name {
    width: 400px;
    height: 200px;
    display: block;
    background: #f00;
}
.remove_user {
    background: #0f0;
    padding: 5px;
    display: inline-block;
}
.hover-1 {
    background: #f00;
}
.hover-2 {
    background: #0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class='user_name'>
  Peter Green <span class='remove_user'>X</span>
</span>

【讨论】：