html - 将悬停样式应用于 li:last-child 链接

Question

我在列表末尾设置了一个项目，看起来很棒，但我似乎无法对悬停状态进行任何更改：

div#navigation li a{color:#73737a;} 
div#navigation li a:hover{color:#3ca2e0;} 
div#navigation li:last-child{
  border-radius:6px;   
 -webkit-border-radius: 6px; 
 -moz-border-radius: 6px;
  border: 1px solid #e0e0e0; padding:6px 9px; color: #fff;
  background-color: blue;     
}

div#navigation li:last-child:hover{
background-color:orange;
}

我注意到 li:last-child:hover 没有“锚”引用，这可能是问题吗？

感谢您的关注！

Answer 1

div#navigation li a{color:#73737a;}
div#navigation li a:hover{color:#3ca2e0;} 
div#navigation li#last-child{
  border-radius:6px;   
-webkit-border-radius: 6px; 
-moz-border-radius: 6px;
border: 1px solid #e0e0e0; padding:6px 9px; color: #fff;
background-color: blue;}

div#navigation li#last-child:hover{
background-color:orange;}

将您的 (li:last-child) 定义为一个 ID，然后应用悬停属性...希望它会有所帮助...

Answer 2

SASS/SCSS 的解决方案：

li {
  &:last-child {
    // default color
    color: #FFBFBF;
  }

  &:last-child:hover {
    // color on hover
    color: #F00;
  }
}