我有一个带有悬停效果的外部 div 和一个内部按钮。当我将鼠标悬停在内部按钮上时,我试图禁用外部 div 上的悬停效果,但未能这样做。非常感谢任何见解!
HTML:
<div class="container">
<button type="button">Click Me!</button>
</div>
CSS:
.container {
background-color: #e6e6e6;
width: 400px;
height: 400px;
margin:0 auto;
position: relative;
text-align: center;
align-items: center;
border: 1px solid black;
}
.container:hover{
border: 1px solid #99ffcf;
background-color: #bababa;
}
button{
padding: 10px;
margin-top: 170px;
}
button:hover{
cursor: pointer;
}
Codepen 演示: https://codepen.io/sherbethead/pen/LYMboRG
如果您正在寻找纯 CSS 解决方案,您可以通过以下块替换容器:hover 来实现
.container:has(:not(button:hover)):hover{
border: 1px solid #99ffcf;
background-color: #bababa;
}
但是请注意,浏览器并不普遍支持 :has,因此请检查您需要的浏览器是否支持我可以使用
.container {
background-color: #e6e6e6;
width: 400px;
height: 400px;
margin:0 auto;
position: relative;
text-align: center;
align-items: center;
border: 1px solid black;
}
.container:has(:not(button:hover)):hover{
border: 1px solid #99ffcf;
background-color: #bababa;
}
button{
padding: 10px;
margin-top: 170px;
}
button:hover{
cursor: pointer;
}
<div class="container">
<button type="button">Click Me!</button>
</div>