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

【问题标题】：Why shows up arrows with all the list element when i hover only one?当我只悬停一个时，为什么会显示带有所有列表元素的箭头？
【发布时间】：2018-08-16 11:30:46
【问题描述】：

我有以下列表，当我将鼠标悬停在 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>

【问题讨论】：

我看不到任何箭头！

标签： html css hover css-shapes

【解决方案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>

【讨论】：

【解决方案2】：

悬停样式选择器是.years:hover a:after { ... }。它在 .years 的悬停上应用悬停样式（而不是在单个项目上）。

如果您想在单个项目的悬停上应用悬停样式，请将您的选择器更改为 .years a:hover:after 即

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

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

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

.years a{
  border-radius: 4px;
  border: none;
  color: #000;
  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>

【讨论】：

你知道我怎样才能让箭头看起来更接近元素吗？
@vinya 在.years:hover a { padding-right: 25px; } 中减少padding-right。减少的内边距越多，箭头就越靠近。

【解决方案3】：

您可以添加一个简单的 jQuery 脚本，为悬停元素添加一个类。

$('.years a').hover(function(){
 $(this).addClass('hovered');
},function(){
 $(this).removeClass('hovered);
});

CSS：

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

【讨论】：