时间戳

首页 > 解决方案 > 如何在悬停时影响div之外的元素

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

问题描述

我试图让一个子菜单出现在我将要悬停的元素 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>

标签： htmlcsshover

解决方案

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

将样式更改应用于 div 的子级 + 将样式更改应用于父级 div 的直接子级 ~ 将样式更改应用于父级 div 的所有以下子级

但是没有办法使用这些选择器直接修改两个级别的 div（祖父母：P）......所以你可能需要一点 JS 希望我正确回答了这个问题

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

推荐阅读