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 ，并使用div s编写了这段代码， 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的人来说，a Codepen。

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

1 个答案: