html - 当我只悬停一个时，为什么会显示所有列表元素的箭头？

Question

我有以下列表，当我将鼠标悬停在 li 上时，我希望出现一个箭头。
但是，相反，如果我将鼠标悬停在其中一个元素上，箭头会与所有元素一起出现。
我怎样才能让它只出现在我悬停的它旁边？

.years ul {
list-style: none;
font-size: 15px;
position: absolute;
margin-left: 60px;
margin-top: 170px;
}

.years li {
padding-top: 5px;
}

.years a{
border-radius: 4px;
border: none;
color: #FFFFFF;
font-size: 15px;
transition: 0.5s;
cursor: pointer;
text-decoration: none;
display: inline-block;
position: relative;
}

.years a:after {
 content: '»';
 position: absolute;
 opacity: 0;
 top: 0;
 right: -20px;
 transition: 0.5s;
 }

.years:hover a {
padding-right: 25px;
}

.years:hover a:after {
 opacity: 1;
 right: 0;
}

<div class="years">
<ul>
<li><a href="#">1992</a></li>
<li><a href="#">1993</a></li>
<li><a href="#">1994</a></li>
<li><a href="#">1995</a></li>
<li><a href="#">1996</a></li>
<li><a href="#">1997</a></li>
<li><a href="#">1998</a></li>
<li><a href="#">1999</a></li>
<li><a href="#">2000</a></li>
<li><a href="#">2001</a></li>
<li><a href="#">2002</a></li>
<li><a href="#">2003</a></li>
<li><a href="#">2004</a></li>
<li><a href="#">2005</a></li>
<li><a href="#">2006</a></li>
<li><a href="#">2007</a></li>
<li><a href="#">2008</a></li>
<li><a href="#">2009</a></li>
<li><a href="#">2010</a></li>
<li><a href="#">2011</a></li>
<li><a href="#">2012</a></li>
<li><a href="#">2013</a></li>
<li><a href="#">2014</a></li>
<li><a href="#">2015</a></li>
<li><a href="#">2016</a></li>
</ul>
</div>

Answer 1

您正在悬停 .years 以便在悬停时显示所有箭头。因此，您需要将选择器更改为 .years a:hover:after

.years a:hover:after {
 opacity: 1;
 right: 0;
}

body {
  background:red
}
.years ul {
  list-style: none;
  font-size: 15px;
  position: absolute;
  margin-left: 60px;
  margin-top: 170px;
}

.years li {
  padding-top: 5px;
}

.years a{
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  font-size: 15px;
  transition: 0.5s;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.years a:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.years:hover a {
  padding-right: 25px;
}

.years a:hover:after {
  opacity: 1;
  right: 0;
}

<div class="years">

  <ul>
    <li><a href="#">1992</a></li>
    <li><a href="#">1993</a></li>
    <li><a href="#">1994</a></li>
    <li><a href="#">1995</a></li>
    <li><a href="#">1996</a></li>
    <li><a href="#">1997</a></li>
    <li><a href="#">1998</a></li>
    <li><a href="#">1999</a></li>
    <li><a href="#">2000</a></li>
    <li><a href="#">2001</a></li>
    <li><a href="#">2002</a></li>
    <li><a href="#">2003</a></li>
    <li><a href="#">2004</a></li>
    <li><a href="#">2005</a></li>
    <li><a href="#">2006</a></li>
    <li><a href="#">2007</a></li>
    <li><a href="#">2008</a></li>
    <li><a href="#">2009</a></li>
    <li><a href="#">2010</a></li>
    <li><a href="#">2011</a></li>
    <li><a href="#">2012</a></li>
    <li><a href="#">2013</a></li>
    <li><a href="#">2014</a></li>
    <li><a href="#">2015</a></li>
    <li><a href="#">2016</a></li>
  </ul>
</div>