Question

我试图使子菜单出现在要悬停的元素div之外。我已经尝试了多种方法来完成这项工作，但是到目前为止我还没有运气。出于设计目的，子菜单必须位于链接div之外。

使它正常工作的最佳方法是什么？

.header {
  display: flex;
  padding: 20px 0;
}

.nav {
  max-width: 1100;
  width: 100%;
  margin: auto;
}

.nav a {
  margin: 0 35px 0 0;
  color: #333333;
  transition: 0.5s ease;
}

#sub-menu {
  position: relative;
  width: 100%;
  background: #333;
  height: 150px;
  display: none;
  margin-top: 20px;
  max-width: 100%;
}

.three:hover #sub-menu {
  display: block
}

<div class="header">
  <div class="nav">
    <a class="one" href="#">Home</a>
    <a class="two" href="#">About</a>
    <a class="three" href="#">Services</a>
    <a class="four" href="#">Contact</a>
  </div>
  <div id="sub-menu"></div>

Answer 1

仅靠CSS无法实现此行为，您需要一些JS代码。原因如下：为了缓解这种情况，CSS提供了3个选择器

将样式更改应用于div的子代 +将样式更改应用于父级div的直属子级〜要将样式更改应用于父div的以下所有子项

但是没有一种方法可以使用这些选择器直接将divs向上修改两个级别（祖父母：P）...所以您可能需要一些JS 希望我正确回答了这个问题

参考 https://techbrij.com/css-selector-adjacent-child-sibling

如何在悬停时影响div之外的元素

1 个答案: