Question

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

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>

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

1 个答案: