问题描述
.sibling-fade
类在所选 <li>
元素的悬停上正确应用,但是,它是在鼠标进入边框区域之前应用的。请参阅下面的 GIF 示例。
示例 GIF
HTML
ul {
margin: 0px;
padding: 0;
}
li {
list-style-type: none;
display: table-row;
height: 54px;
}
/* Sibling Fade */
.sibling-fade {
pointer-events: none;
}
.sibling-fade > * {
pointer-events: auto;
}
.sibling-fade > * {
transition: opacity 150ms linear 100ms,ease-in-out 100ms;
}
.sibling-fade:hover > * {
opacity: 0.4;
}
.sibling-fade > *:hover {
opacity: 1;
transition-delay: 0ms,0ms;
}
<ul class="sibling-fade">
<li><a href="one.html"><p class="title">Project One</p></a></li>
<li><a href="two.html"><p class="title">Project Two</p></a></li>
<li><a href="three.html"><p class="title">Project Three</p></a></li>
</ul>
解决方法
如果您检查 <li>
,您会发现它的宽度和高度与其内容不完全吻合,有几个原因导致了这个问题;
-
<p class="title">
默认有上下边距,删除它。 - 您必须删除
li {display: table-row;height: 54px;}
。
所有这些都是用元素 width
和 height
计算的。
那么我在完成上述步骤后做了什么:
- 添加
li {display: inline-block;}
- 在每个
<br>
后添加<li>
ul {
margin: 0px;
padding: 0;
}
li {
list-style-type: none;
display: inline-block;
}
/* Sibling Fade */
.sibling-fade {
pointer-events: none;
}
.sibling-fade > * {
pointer-events: auto;
}
.sibling-fade > * {
transition: opacity 150ms linear 100ms,ease-in-out 100ms;
}
.sibling-fade:hover > * {
opacity: 0.4;
}
.sibling-fade > *:hover {
opacity: 1;
transition-delay: 0ms,0ms;
}
.title {
margin: 0;
}
<ul class="sibling-fade">
<li><a href="one.html"><p class="title">Project One</p></a></li><br>
<li><a href="two.html"><p class="title">Project Two</p></a></li><br>
<li><a href="three.html"><p class="title">Project Three</p></a></li><br>
</ul>