Why shows up arrows with all the list element when i hover only one?

Question

I have the following list, and I want an arrow to appear when I hover over a li.
But, instead, the arrows appear with all the elements if I hover one of them.
How can I make it only appear next to it which i hover?

.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>

Mukesh Ram · Answer 1 · 2016-11-11T13:34:24.820

You are hovering .years so that all arrow are shown on hovering. So that you need to change your selector to .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>

Mohammad Usman · Answer 2 · 2016-11-11T13:34:43.673

Your selector for hover styles is .years:hover a:after { ... }. It is applying hover styles on hover of .years (not on individual items).

If you wants to apply hover styles on hover of individual items then change your selector to .years a:hover:after i.e.

.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>

And do you know maybe how can i make the arrow appeare closer to the element? — vinya, Nov 11 '16 at 13:38
@vinya Reduce `padding-right` in `.years:hover a { padding-right: 25px; }`. The more padding you will reduce, the more arrow will come closer. — Mohammad Usman, Nov 11 '16 at 13:41

score 0 · Answer 3 · answered Nov 11 '16 at 13:31

You can add a simple jQuery script which adds a class to hovered element.

$('.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;
 }

Why shows up arrows with all the list element when i hover only one?

3 Answers3