Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

Answer 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;
 }

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

3 个答案: