css 如何保持悬停在子元素上？

bweufnob 于 2024-01-09 发布在其他

关注(0)|答案(2)|浏览(113)

我有一个导航栏，我想有一个有一些额外的信息和一些额外的链接，但也很好地与标签对齐（这就是为什么我想把info元素保留为子元素的原因，而不是单独的元素）.我似乎无法解决如何在鼠标移动到其他链接时保持悬停可见而不分离元素的问题。有没有办法实现这是纯CSS吗？
HTML：

<div class="navbar">
  <ul>
    <li><a href="">about us</a></li>
    <li><a href="">rules</a></li>
    <li>
      <div class="glossary navlink">
        <a href="">glossary</a>

        <div class="dd-glossary">
          <div class="dd-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae ornare metus, vel scelerisque justo. Quisque et justo vel massa imperdiet cursus.</p>
            <a href="">link</a>
            <a href="">link</a>
            <a href="">link</a>
          </div>
        </div>
      </div>
    </li>
    <li><a href="">forum</a></li>
    <li><a href="">gallery</a></li>
  </ul>
</div>

字符串
CSS：

body {
  margin: 0;
}

.navbar {
  background: #1d1d1d;
  color: #efeeeb;
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
}

.navlink {
  display: inline;
}

.navbar ul {
  margin: auto;
  padding: 10px;
}

.navbar li {
  display: inline;
  list-style: none;
  padding: 10px;
}

.navbar a {
  text-decoration: none;
  color: #efeeeb;
  transition: transform 500ms cubic-bezier(0.7, 0, 0.3, 1) 0ms;
}

.navbar a:hover {
  color: yellow;
}

.glossary {
  position: relative;
}

.dd-glossary {
  display: none;
  position: absolute;
  background: #242424;
  z-index: -10;
  left: -10px;
  top: -10px;
  width: 300px;
  padding: 10px;
}

.dd-glossary:hover,
.glossary:hover .dd-glossary {
  display: block;
  transition-duration: 1s;
}

.dd-content {
  margin-top: 40px;
}

型
这是JSfiddle，谢谢！

css

来源：https://stackoverflow.com/questions/77729645/how-to-sustain-hover-over-child-element

2条答案

按热度按时间

rekjcdws1#

您正在将块样式规则添加到hover上的a，但是链接的高度没有跨越导航栏的整个高度。请尝试将hover规则添加到li元素。
如果li填满了整个高度，那么这就足够了，但实际上并不是这样。我添加了一个红色背景，只是为了让它变得明显，你可以看到底部有一个1px的空间，这扰乱了行为。（忽略顶部的黑线，它来自截图中的窗口框架）

的数据
为了解决这个问题，我删除了父ul的填充，并将inline-block添加到li s。

body {
  margin: 0;
}

.navbar {
  background: #1d1d1d;
  color: #efeeeb;
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
}

.navlink {
  display: inline;
}

.navbar ul {
  margin: auto;
}

.navbar li {
  display: inline-block;
  list-style: none;
  padding: 10px;
}

.navbar a {
  text-decoration: none;
  color: #efeeeb;
  transition: transform 500ms cubic-bezier(0.7, 0, 0.3, 1) 0ms;
}

.navbar a:hover {
  color: yellow;
}

.glossary {
  position: relative;
}

.dd-glossary {
  display: none;
  position: absolute;
  background: #242424;
  z-index: -10;
  left: -10px;
  top: -10px;
  width: 300px;
  padding: 10px;
}

.dd-glossary:hover,
.sustain-hover:hover .dd-glossary {
  display: block;
  transition-duration: 1s;
}

.dd-content {
  margin-top: 40px;
}

个字符

赞(0）回复(0）举报 2024-01-09

luaexgnf2#

body {
  margin: 0;
}

.navbar {
  background: #1d1d1d;
  color: #efeeeb;
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
}

.navlink {
  display: inline;
  position: relative; /* Added position: relative to .navlink */
}

.navbar ul {
  margin: auto;
  padding: 10px;
}

.navbar li {
  display: inline;
  list-style: none;
  padding: 10px;
}

.navbar a {
  text-decoration: none;
  color: #efeeeb;
  transition: transform 500ms cubic-bezier(0.7, 0, 0.3, 1) 0ms;
}

.navbar a:hover {
  color: yellow;
}

.glossary:hover .dd-glossary {
  display: block;
  transition-duration: 1s;
}

.dd-glossary {
  display: none;
  position: absolute;
  background: #242424;
  z-index: 1; /* Updated z-index to bring the dropdown above other elements */
  left: 0;
  top: 100%;
  width: 300px;
  padding: 10px;
}

.dd-content {
  margin-top: 0; /* Adjusted margin-top to remove space */
}

个字符
关键变更：
将position：relative;添加到.navlink类中，以作为绝对定位的参考。
调整了.dd-glossary的top属性，将tags放置在父元素的下方。
从.dd-glossary中删除了负z索引，并将其设置为正值，以确保它显示在其他元素之上。
现在，当鼠标悬停在其中的链接上时，该控件将保持可见，并且您不需要使用JavaScript来实现此效果。

赞(0）回复(0）举报 2024-01-09

我来回答

css 如何保持悬停在子元素上？

2条答案

相关问题

热门标签

最新问答