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没有'Anchor'引用，这可能是问题吗？

感谢您的期待！

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

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

2 个答案: