Question

我有这个结构：

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

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

有没有办法用CSS而不涉及javascript？

谢谢

Answer 1

由@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>

OR：您可以通过使用这样的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>

Answer 2

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

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

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

但是jquery已经有了一个父选择器$(".remove_user:parent")，所以cssParentSelector对于减少javascript的使用没有帮助。它只允许支持CSS4时更容易转换。

所以今天的选择是使用哪种javascript来实现它。

CSS - 如何在悬停的孩子时更改父元素？

2 个答案: