将 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 和@987654325 想出了这段代码@、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 的人，请前往 a Codepen。