我有一个包含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>
这是因为你正在将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>