css - 悬停翻译的剪辑路径多边形时在错误的位置放置阴影

Question

我有一个包含 3 个三 Angular 形的列表，我想在将鼠标悬停在其中时对其应用阴影。最后 2 个三 Angular 形被平移，以便它们并排站立。当我将鼠标悬停在第一个三 Angular 形(片段中的绿色三 Angular 形)的框上时，阴影出现在最后一个三 Angular 形下方。为什么会发生这种情况，我该怎么做才能避免这种情况？为什么第一个三 Angular 形在整个盒子上而不只是在三 Angular 形上记录悬停事件？

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>

Answer 1

这是因为您将 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>

如果你只想悬停三 Angular 形，只需将 li 的高度设置为 0 这样只有子元素会触发悬停，这是你的三 Angular 形元素:

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>