提问人：Rip 提问时间：2/22/2022 最后编辑：isherwoodRip 更新时间：2/22/2022 访问量：33
将鼠标悬停在 div 更新上，按点显示或间歇性显示
hover over div updates display in spots or intermittently
问：
我正在尝试实现悬停以显示标题的效果。我已将 ：hover 选择器分配给宽度为 99% 且高度为 10vh 的 div，该 div 应该与标题相邻。当我将鼠标悬停在 div 的中心时，悬停上的显示会一致执行，当我将鼠标悬停在 div 的右侧时会间歇性地执行，当我将鼠标悬停在 div 的左侧时，则从不执行。我添加了一个边框，使 ：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>答：
0赞
isherwood
2/22/2022
#1
悬停规则设置同级元素的 display 属性，该属性将其放置在原始元素上。然后，这会中断原始元素上的悬停事件。如果同级元素是子元素，它仍然有效，因为悬停事件会传播。请看这里。
请注意，这可能会增加悬停区域的大小，因为父元素会被子元素拉伸。
我没有更具体的解决方案，因为我不知道你的目标。
* {
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>
评论