Css 用单个事件连接多个元素

是否可以将多个不同的元素与仅使用CSS3的特定元素上的单个事件连接起来

下面是我的例子；阅读标题选择器中的注释

css

html

切换导航

否，当第二个元素是第一个元素的子元素时，css中唯一的更改控件是可能的。 这是可能的，因为li是DOM树下#header的子元素

#header:hover li {
color: red;
}

但是在DOM树上，它将失去css的控制。

---

您可以使用javascript实现这一点。

您不能仅在CSS中实现这一点，因为它没有祖先选择器

但是，您可以通过提供

#header

相对定位，并在列表末尾添加一个空的

li

，其高度和宽度为

#header

，但z索引为负数，来伪造效果

为空

li

指定以下样式：

.nav > li:last-of-type {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: transparent;
}

并添加此样式：

.nav > li:hover ~ li:last-of-type {
  background-color: red;
}

片段：

#标题{
边框颜色：深色；
边框宽度：0.3px；
位置：相对位置；
}
.nav>li{
背景色：暗色；
}
.nav>li:悬停{
背景色：红色；
}
.nav>li:悬停~li:类型的最后一个{
背景色：红色；
}
.nav>li：类型的最后一个{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：-1；
背景色：透明；
}

切换导航

仅使用CSS是什么意思？好吧，css不处理事件不，这在css中是不可能的。你不能用CSS在DOM树上导航。不过，您可以使用JavaScript/jQuery来实现这一点。

.nav > li:last-of-type {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: transparent;
}

.nav > li:hover ~ li:last-of-type {
  background-color: red;
}