Question

当用户将鼠标悬停在nav div上时，我尝试选择带有display类的div来将block属性更改为hamburger。

我已经建立了互联网，并且看到有人说如果使用:not(insert_container_name_here)伪类，你可以实现这一点，但是，它似乎没有用。

一个要求是我不能使用Javascript。

以下是我尝试解决此问题的方法：

.nav {
  display: none;
  padding: 15px;

  background: red;
}

.hamburger {
  margin: 0;
  padding: 15px; 
  text-align: left;
}

.hamburger:hover .hamburger:not(.hamburger) > .nav {
  display: block;
}

.hamburger > .toggle-btn {
  color: black;
  text-decoration: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="hamburger">
  <a href="#" class="toggle-btn"><i class="fa fa-bars"></i></a>
</div>

<div class="nav">
  <p>Display</p>
</div>

Answer 1

像这样使用+ adjacent sibling selector：

.hamburger:hover + .nav {
  display: block;
}

见下面的演示：

＆＃13;

.nav {
  display: none;
  padding: 15px;
  background: red;
}
.hamburger {
  margin: 0;
  padding: 15px;
  text-align: left;
}
.hamburger:hover + .nav {
  display: block;
}
.hamburger > .toggle-btn {
  color: black;
  text-decoration: none;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="hamburger">
  <a href="#" class="toggle-btn"><i class="fa fa-bars"></i></a>
</div>

<div class="nav">
  <p>Display</p>
</div>

＆＃13;

Answer 2

使用general sibling selector ~，即使您决定在两者之间添加其他元素，也可以定位nav。

.hamburger:hover ~ .nav {
  display: block;
}

示例代码段

.nav {
  display: none;
  padding: 15px;
  background: red;
}
.hamburger {
  margin: 0;
  padding: 15px; 
  text-align: left;
}
.hamburger:hover ~ .nav {
  display: block;
}
.hamburger > .toggle-btn {
  color: black;
  text-decoration: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="hamburger">
  <a href="#" class="toggle-btn"><i class="fa fa-bars"></i></a>
</div>

<div class="nav">
  <p>Display</p>
</div>

如何选择不是父div的子级但在父div之外的div？

2 个答案: