将鼠标悬停在 div 更新点或间歇显示

Question

我正在尝试实现悬停以显示 header 的效果。我已将 :hover 选择器分配给宽度为 99%、高度为 10vh 的 div，它应该与 header 相邻。当我将鼠标悬停在 div 的中心时，悬停显示会持续执行，当我将鼠标悬停在 div 的右侧时，会间歇性地执行，而当我将鼠标悬停在 [=28= 的左侧时，则不会].我添加了一个边框以使 :hover div 的边界可见。

当我悬停在 div 上的任何地方时，悬停不应该处于活动状态吗？

这个设置我做错了什么？

https://codepen.io/ripmurdock/pen/RwjyoqB?editors=1000

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #121212;
}

.cc_vert_c1-1 {
  width: 5vw;
  height: 83vh;
  left: 2vw;
  top: 16vh;
  position: absolute;
  overflow: hidden;
}

.cc_hdr_cl-1 {
  position: absolute;
  height: 10vh;
  border-style: dotted;
  border-color: white;
  display: none;
}

.cc_hover {
  position: absolute;
  height: 10vh;
  width: 99%;
  border-style: dotted;
  border-color: white;
}

.cc_hover:hover+#cc_hdr-1 {
  display: block;
}

.cc_hdr_logo_cl-1 {
  width: 40vw;
  max-height: 99.5vh;
  padding-left: 2vw;
  padding-top: 3vh;
}

.cc_horiz_c1-1 {
  width: 48.3vw;
  height: 10vh;
  left: 50vw;
  top: 3vh;
  position: absolute;
}

<div class="cc_vert_c1-1">
  <svg width="100" height="100vh">
    <rect width="100" height="100vh" fill="#fff" />
  </svg>
</div>

<div class="cc_hover"></div>

<div class="cc_hdr_cl-1" id="cc_hdr-1">
  <svg class="cc_hdr_logo_cl-1">
            <rect width="100" height="7vh" fill="#fff" />
    </svg>

  <svg class="cc_horiz_c1-1">
      <rect width="600" height="7vh" fill="#fff" />
    </svg>
</div>

Answer 1

您的悬停规则设置了兄弟元素的显示属性，该元素位于原始元素之上。然后，这会中断原始元素上的悬停事件。如果同级元素是 child 元素，它仍然可以正常工作，因为悬停事件会传播。看这里。

请注意，这可能会增加悬停区域的大小，因为父元素会被子元素拉伸。

我不知道你的目标，所以没有更具体的解决方案。

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #121212;
}

.cc_vert_c1-1 {
  width: 5vw;
  height: 83vh;
  left: 2vw;
  top: 16vh;
  position: absolute;
  overflow: hidden;
}

.cc_hdr_cl-1 {
  position: absolute;
  height: 10vh;
  border-style: dotted;
  border-color: white;
  display: none;
}

.cc_hover {
  position: absolute;
  height: 10vh;
  width: 99%;
  border-style: dotted;
  border-color: white;
}

.cc_hover:hover #cc_hdr-1 {
  display: block;
  background: pink;
}

.cc_hdr_logo_cl-1 {
  width: 40vw;
  max-height: 99.5vh;
  padding-left: 2vw;
  padding-top: 3vh;
}

.cc_horiz_c1-1 {
  width: 48.3vw;
  height: 10vh;
  left: 50vw;
  top: 3vh;
  position: absolute;
}

<div class="cc_vert_c1-1">
  <svg width="100" height="100vh">
    <rect width="100" height="100vh" fill="#fff" />
  </svg>
</div>

<div class="cc_hover">
  <div class="cc_hdr_cl-1" id="cc_hdr-1">
    <svg class="cc_hdr_logo_cl-1">
            <rect width="100" height="7vh" fill="#fff" />
    </svg>

    <svg class="cc_horiz_c1-1">
      <rect width="600" height="7vh" fill="#fff" />
    </svg>
  </div>
</div>

将鼠标悬停在 div 更新点或间歇显示

hover over div updates display in spots or intermittently

html

css

svg

hover