我有一个看起来像这样的UI
+---------------------------+ | | | +--area1--+ +--area2--+ | | | | | | | | | | | | | | +---------+ +---------+ | | | +---------------------------+
我希望area1和area2在其中任何一个悬停时显示特定的样式.现在,如果指针超过了area1,那么我就得到了
+---------------------------+ | | | +--area1--+ +--area2--+ | | |.........| | | | | |....?....| | | | | +---------+ +---------+ | | | +---------------------------+
如果指针超过了area2,我得到了
+---------------------------+ | | | +--area1--+ +--area2--+ | | | | |.........| | | | | |....?....| | | +---------+ +---------+ | | | +---------------------------+
我想要的是如果指针位于区域1或区域2上,我的两个区域都显示其悬停状态
+---------------------------+ | | | +--area1--+ +--area2--+ | | |.........| |.........| | | |....?....| |.........| | | +---------+ +---------+ | | | +---------------------------+
只有CSS才有可能吗？
这是一些实时HTML/CSS
* {
box-sizing: border-box;
}
html,body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
display: flex;
justify-content: center;
align-content: center;
height: 100%;
}
.unrelatedcontainer {
width: 100%;
height: 100%;
border: 1px solid red;
}
.area1,
.area2 {
margin: 3em;
height: 80%;
border: 1px solid black;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.area1:hover,
.area2:hover {
background-color: green;
}
area1
area2
这当然是可能的.
涉及两个步骤:
1)将悬停效果放在容器上,这样只要将鼠标悬停在容器中的任何位置 - area1和area2都会获得新的背景
.container:hover .area1,.container:hover .area2 {
background-color: green;
}
这里的问题是,现在悬停效果将在容器中的任何位置生效,而不仅仅是当我将鼠标悬停在2个区域上时.所以....
2)诀窍是关闭容器上的指针事件并在2个区域上重新打开它们.
因此,当鼠标悬停在2个区域之外的容器中的任何位置时 - 未应用悬停效果,因为我们已禁用容器上的指针事件.
但是,只要鼠标悬停在2个区域上,我们就会再次启用指针事件,并且悬停效果会自动生效.
.container{
pointer-events:none;
}
.container .area1,.container .area2{
pointer-events:all;
}
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
display: flex;
justify-content: center;
align-content: center;
height: 100%;
}
.container {
pointer-events: none;
}
.container .area1,
.container .area2 {
pointer-events: all;
}
.container:hover .area1,
.container:hover .area2 {
background-color: green;
}
.unrelatedcontainer {
width: 100%;
height: 100%;
border: 1px solid red;
}
.area1,
.area2 {
margin: 3em;
height: 80%;
border: 1px solid black;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
area1
area2
京公网安备 11010802040832号 | 京ICP备19059560号-6 