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

Question

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

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>

如果你只想悬停三角形，只需将 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>

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

Drop shadow in the wrong place when hovering translated clip-path polygons

css

css-filters

clip-path