Ограничить область наведения CSS-фигур до: после - PullRequest
Новая
       57

Ограничить область наведения CSS-фигур до: после

0 голосов
/ 17 октября 2018

Я пытаюсь создать своего рода диаграмму Венна, которая будет использоваться для навигации позже.

У меня есть три пересекающихся эллипсоида, созданные с помощью фигур 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 перемещаемыми вне пересечений.

Я не знаю, есть ли способ, которым я делаю, это лучшее, и я открыт для предложений.

1 Ответ

0 голосов
/ 19 октября 2018

Спасибо, что ответили мне @ 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, вы идете Codepen .

...