我正在嘗試實作懸停以顯示標題的效果。我已將 :hover 選擇器分配給寬度為 99%、高度為 10vh 的 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>uj5u.com熱心網友回復：
您的懸停規則設定兄弟元素的顯示屬性，將其放置在原始元素上。然后，這會中斷原始元素上的懸停事件。如果兄弟元素是子元素，它仍然可以作業，因為懸停事件會傳播。看這里。
請注意，這具有增加懸停區域大小的潛在不良影響，因為父元素被子元素拉伸。
我沒有更具體的解決方案，因為我不知道您的目標。
* {
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/432803.html