Question

代码解释优于文字

<div class="parent">
  <span class="child"></span>
</div>
<div class="outside"></div>

我想做什么

.child:hover ? .outside { }

其中?是我正在寻找的选择器

Answer 1

选择器表达元素之间的结构关系。当你要求选择元素时，＆＃34;在外面＆＃34;另一个元素，你正在寻找一个组合词，表示＆＃34;这个元素出现在另一个元素的包含范围之外＆＃34;。

没有这样的组合器。

您可以想象明确地选择.outside .parent的{{1}}兄弟，然后您遇到there is no parent selector与.parent相对于.child:hover匹配的另一个问题匹配.child:hover相对于.parent（即.parent > .child:hover）。

另请参阅：How do I select an element based on the state of another element in the page with CSS?

Answer 2

最简单的方法是将.parent类设置为悬停所需的元素。

然后你可以做

.parent:hover ~ .outside {

}

Answer 3

使用以下html结构：

<div class="parent">
<span class="child"></span>
</div>

<div class="outside"></div>

由于CSS中没有可靠的父选择器，因此您只能以 5种方式选择.outside ：

直接
如果它是.parent。
如果是.parent的孩子。
如果它是.child。
如果是.child的孩子。

由于.outside既不是兄弟姐妹也不是.child的孩子，也不是.parent的孩子，因此您选择.outside的唯一剩余关系是.parent的兄弟姐妹。

当您将鼠标悬停在.outside上时，如果只希望.child的演示文稿只更改，那么这不是您想要的。

当CSS已经可以处理任务时，我不喜欢使用javascript来影响演示，但在这种情况下，CSS无法处理任务并且javascript是基本的：

var child = document.getElementsByClassName('child')[0];
var outside = document.getElementsByClassName('outside')[0];

function childHover() {
outside.classList.toggle('childhover');
}

function initialiseChildHover() {
child.addEventListener('mouseover',childHover,false);
child.addEventListener('mouseout',childHover,false);
}

window.addEventListener('load',initialiseChildHover,false);

.parent {
display: inline-block;
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 1);
}

.child {
display: inline-block;	
width: 100px;
height: 100px;
margin: 50px;
background-color: rgba(255, 255, 0, 1);
}

.outside {
display: inline-block;
width: 150px;
height: 150px;
background-color: rgba(0, 255, 0, 1);
}

.outside.childhover {
background-color: rgba(0, 0, 255, 1);
}

<div class="parent">
<span class="child"></span>
</div>
    
<div class="outside"></div>

是否有一个css选择器选择当前元素之外的元素？

3 个答案: