将 CSS 形状的悬停区域限制为 :after

Question

我正在尝试制作一种维恩图，稍后将用于导航。

我有三个使用 CSS 形状创建的相交椭球体。每个椭球体及其两个交点稍后将成为不同的链接。此外，当您将鼠标悬停在它们上时，它们应该会按照transform: scale(1.3)弹出。

我的问题是我正在使用部分:after透明的椭圆体来创建交点，这在悬停在它们上面时会产生问题，因为将:hover条件悬停在部分透明的椭球体上的任何位置而不仅仅是:after part。这意味着非相交区域不可悬停，因为它们被其他不可见的椭球体阻挡。

我认为这个例子会更清楚地说明这一点。

这是代码：

.CSS：

.venn-container{position: relative; left: 0;}
.cat_one{
width: 400px;
height: 200px;
background: red;
border-radius: 200px / 100px;
position: absolute;
float: left;
opacity: 0.5;
}
.cat_two{
width: 400px;
height: 200px;
background: green;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 240px;
opacity: 0.5;
}
.cat_three{
width: 400px;
height: 200px;
background: blue;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 480px;
opacity: 0.5;
}
.int1{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
}
.int1:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: 240px;
}
.int1:hover{
transform: scale(1.3);
left: -35px;
}
.int2{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
left: 80px;
}
.int2:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: -240px;
}
.int2:hover{
transform: scale(1.3);
left: 115px;
}

.HTML：

<div class="venn-container">
<div class="cat_one"></div>
<div class="cat_two"></div>
<div class="cat_three"></div>
<div class="int1"></div>
<div class="int2"></div>
</div>

这里有一个小提琴：https://jsfiddle.net/y3Lvmuqg/2/

我希望:hover只在十字路口触发，然后使cat_one和cat_two在十字路口外悬停。

我不知道是否有一种方法是我这样做的最好，我愿意接受建议。

Answer 1

感谢您回复我，@ge0rg我花了大约一个小时摆弄CSS和HTML，并仅使用divs与background colors，hover events和border radius(以及一些z-index和positioning techniques(提出了此代码。
希望你喜欢你重新设计的维恩图...你可能不得不弄乱
大小，而且肯定不得不弄乱定位(但是它们都在div 内，所以你可以只定位div，其余的就会神奇地发生(我为div 添加了背景颜色只是为了表明没有什么是透明的， 我还添加了一个始终在顶部的查看部分功能，希望您喜欢！

.Venn {
background: linear-gradient(to bottom right, blue, lightblue);
}
.d1:hover, .d2:hover, .d3:hover {
color: #565656;
animation: top 2s steps(2, end) forwards;
-webkit-animation: top 2s steps(2, end) forwards;
box-shadow: 0px 0px 20px white;
}
.d1, .d2, .d3 {
overflow-wrap: break-word;
}
.d1 center, .d3 center {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.d1 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 1;
position: absolute;
border-radius: 100%;
top: 0px;
}
.d3 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 2;
position: absolute;
border-radius: 100%;
top: 0px;
left: 81px;
}
.d1:hover, .d3:hover {
transform: scale(1.05);
}
.d2 {
border-radius: 100% 0;
height: 90px;
width: 87.5px;
transform: rotate(-45deg) scale(.7);
position: absolute;
top: 15px;
left: 55.35px;
z-index: 3;
border: 1px solid black;
}
.d2b {
transform: rotate(45deg);
padding: 0;
margin: 0;
}
.d2b center {
position: relative;
left: 20px;
}
.d2:hover {
transform: rotate(-45deg);
}
.Venn {
height: 100px;
}
-webkit @keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}
@keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}

<div class="Venn" style="position: relative; left: 50px; width: 300px; height: 100px;">
<div class="d1" style=" background-color: grey;">
<center> 1 </center>
</div>
<div class="d2" style=" background-color: #AAAAAA;">
<div class="d2b" style="max-width: inherit;">
<center> 2 </center>
</div>
</div>
<div class="d3" style=" background-color: lightgrey;">
<center> 3 </center>
</div>
</div>

对于那些喜欢JSfiddle/CodePen的人，你可以选择Codepen。