我有两个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>