如何将悬停事件应用于z索引较低的元素,同时保留z索引较高的元素的指针事件



我有两个div元素。

<div class="container">
<div class="card">...card container...</div>
<div class="effect-background">...effect container...</div>
</div>

下面是的款式

.card {
width: 500px;
height: 500px;
z-index: 10;
}
.card:hover {
...CARD HOVER STYLES...
}
.effect-background{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 9;
}
.effect-background:hover {
...BACKGROUND HOVER STYLES...
}

但是背景HOVER样式在卡片分区上悬停时不起作用

我知道pointer-events: none;CSS,但我想同时保持CARD HOVER风格。

有可能吗?

使用:.card:hover + .effect-background。您可以在这里阅读更多关于选择器的信息。

希望有帮助:(

.card {
position: absolute;
left: 40vw;
top: 40vh;
width: 20vw;
height: 20vh;
z-index: 10;
background-color: yellow;
}
.card:hover {
background-color: yellowgreen;
}
.effect-background{
position: absolute;
background-color: red;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 9;
}
.card:hover + .effect-background {
background-color: pink;}
<div class="container">
<div class="card">...card container...</div>
<div class="effect-background">...effect container...</div>
</div>

相关内容

  • 没有找到相关文章

最新更新