這個問題在這里已經有了答案： 當一個元素懸停時如何影響其他元素 7 個回答 5 小時前關閉。
當我將滑鼠懸停在按鈕上時，我試圖讓影片播放，但我希望它定位標簽 div 和標簽 p 元素，而不是觸發它的元素。
另外，當只有 div 懸停時，我需要它作業，反之亦然。它應該為兩個元素播放影片，無論是否只有一個懸停在上面。
我想我可以使用 div 將它們組合在一起，但這會很乏味并且可能會使代碼混亂。我已經有一個充滿嵌套 div 的頁面。我覺得如果我正確使用選擇器會更容易。
HTML
<html>
<head>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<div class="button"
style="max-width: 157.39px; max-height: 157.39px;"
<div class="label">
<p class"label">the big</p>
</div>
</div>
</body>
</html>
CSS
@keyframes show-label {
from {
opacity: 0%;
}
to {
opacity: 100%;
}
}
body {
display: flex;
flex-direction: column;
flex: auto;
align-items: center;
}
div.button {
display: flex;
flex-direction: column;
justify-content: flex-end;
flex: auto;
width: 20vw;
height: 20vw;
background-color: lightgray;
border-radius: 10px;
}
.label {
opacity: 0%;
}
.label:hover {
animation: show-label 500ms forwards;
div.label {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 0px 0px 10px 10px;
}
p.label {
color: white;
font-size: min(1.8vw, 18.17px);
text-align: center;
}
uj5u.com熱心網友回復：
除了您的代碼在 html 和 css 中缺少結束字符這一事實之外，您還可以使用按鈕懸停來定位標簽，如下所示：
.button:hover .label { }
作為關鍵幀的替代方案，您可以進行簡單的“過渡”以輕松地使其淡入和淡出。
body {
display: flex;
flex-direction: column;
flex: auto;
align-items: center;
}
div.button {
display: flex;
flex-direction: column;
justify-content: flex-end;
flex: auto;
width: 20vw;
height: 20vw;
background-color: lightgray;
border-radius: 10px;
}
.label {
opacity: 0%;
}
.button:hover{cursor:pointer;}
div.label {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 0px 0px 10px 10px;
transition: opacity 0.3s linear;
}
p.label {
color: white;
font-size: min(1.8vw, 18.17px);
text-align: center;
transition: opacity 0.3s linear;
}
.button:hover .label {
opacity:100%;
} <div class="button"
style="max-width: 157.39px; max-height: 157.39px;">
<div class="label">
<p class="label">the big</p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/322082.html
下一篇：Ul不適合導航