懸停時邊框更改顏色

Question

我希望將鼠標懸停時右邊框從綠色更改為黑色。 我嘗試過的CSS無法正常工作。 怎么辦

---

HTML：

<li class="">
<a class="xclass" title="1stmenu" href="mylink">mytext</a>

---

CSS：

.sf-menu > li {  
  float: left;  
  border-right: 2px solid;  
  border-color : #fff #00a54f;  
               }  
.sf-menu > li.sfHover > a,  
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {  
    border-color : #fff black;  
    color: #00a54f; }

---

如果有人還可以提供有關如何執行懸停腳本的一些信息，將不勝感激。

Answer 1

嗨，我注意到您的html不完整，而您的css太復雜了，因此我通過添加ul元素並為a href設置了非懸停狀態的樣式來完成並簡化了它：

 .sf-menu { list-style: none; margin: 0; padding: 0; } .sf-menu li { float: left; } .sf-menu li a { border-right: 2px solid; border-color : #fff #00a54f; } .sf-menu > li.sfHover > a, .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a { border-color : #fff black; color: #00a54f; } 

 <ul class="sf-menu"> <li class=""> <a class="xclass" title="1stmenu" href="mylink">mytext</a> </li> </ul> 

Answer 2

為此，您必須使用類似：

.sf-menu li {
border-color : green;
}
.sf-menu li:hover {
border-color : black;
}

我希望它能起作用。