html - 将 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>

这是一个 fiddle :https://jsfiddle.net/y3Lvmuqg/2/

我希望 :hover 只在交叉路口触发，然后让 cat_one 和 cat_two 可以在交叉路口外悬停。

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

Answer 1

感谢你回复我 @ge0rg 我花了大约一个小时摆弄 CSS 和 HTML 并仅使用 div 具有背景颜色、悬停事件 和边框半径(以及一些z-index 和定位技术).
希望您喜欢重新设计的维恩图...
您可能不得不弄乱大小，并且肯定会弄乱定位(但是它们都在一个 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 .