Отбрасывание тени в неправильном месте при наведении переведенных полигонов пути клипа - PullRequest
Новая
       53

Отбрасывание тени в неправильном месте при наведении переведенных полигонов пути клипа

0 голосов
/ 26 февраля 2019

У меня есть список из 3 треугольников, к которым я хочу применить тень при наведении на нее.Последние 2 треугольника переводятся так, чтобы они стояли рядом.Когда я наведите курсор мыши на прямоугольник 1-го треугольника (зеленый во фрагменте), под последним треугольником появится тень.Почему это происходит, что я мог сделать, чтобы избежать этого?И почему 1-й треугольник регистрирует событие наведения на всю рамку, а не только на треугольник? 

li {
  list-style: none;
  position: absolute;
  width: 100px;
  height: 100px;
}

div {
  width: 100%;
  height: 100%;  
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.one {
  background-color: green;
}

.two {
  background-color: blue;
  transform: translateX(100%);
}

.three {
  background-color: red;
  transform: translateX(200%);
}

li:hover {
  cursor: pointer;
  filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5))
}
<ul>
  <li>
    <div class="one"></div>
  </li>
  <li>
    <div class="two"></div>
  </li>
  <li>
    <div class="three"></div>
  </li>
</ul>

1 Ответ

0 голосов
/ 26 февраля 2019

это потому, что вы применяете drop-shadow к li и переводите div внутри.Таким образом, при наведении курсора на первый li вы будете зависать над последним li, так как этот элемент появится позже в дереве DOM.

Добавьте границу, чтобы лучше увидеть проблему.Вы можете ясно видеть, что все li расположены друг над другом.Так что при наведении курсора на всех них будет зависать последний. 

li {
  list-style: none;
  position: absolute;
  width: 100px;
  height: 100px;
  border:2px solid; 
}

div {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.one {
  background-color: green;
}

.two {
  background-color: blue;
  transform: translateX(100%);
}

.three {
  background-color: red;
  transform: translateX(200%);
}

li:hover {
  cursor: pointer;
  filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));
  border:2px solid green; 
}
<ul>
  <li>
    <div class="one"></div>
  </li>
  <li>
    <div class="two"></div>
  </li>
  <li>
    <div class="three"></div>
  </li>
</ul>

Вместо этого можно перевести li и избежать этой проблемы: 

li {
  list-style: none;
  position: absolute;
  width: 100px;
  height: 100px;
}

div {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.one {
  background-color: green;
}

.two {
  background-color: blue;
}

.three {
  background-color: red;
}

li:nth-child(2) {
  transform: translateX(100%);
}

li:nth-child(3) {
  transform: translateX(200%);
}

li:hover {
  cursor: pointer;
  filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5))
}
<ul>
  <li>
    <div class="one"></div>
  </li>
  <li>
    <div class="two"></div>
  </li>
  <li>
    <div class="three"></div>
  </li>
</ul>

Если вы хотите навести только треугольник, просто установите высоту li равной 0, таким образом, только дочерний элемент будет вызывать наведениекоторый является вашим треугольным элементом: 

li {
  list-style: none;
  position: absolute;
  width:100px;
  height:0;
}

div {
  width: 100%;
  height: 100px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.one {
  background-color: green;
}

.two {
  background-color: blue;
}

.three {
  background-color: red;
}

li:nth-child(2) {
  transform: translateX(100%);
}

li:nth-child(3) {
  transform: translateX(200%);
}

li:hover {
  cursor: pointer;
  filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5))
}
<ul>
  <li>
    <div class="one"></div>
  </li>
  <li>
    <div class="two"></div>
  </li>
  <li>
    <div class="three"></div>
  </li>
</ul>
...