悬停时边框更改颜色

Question

I want a right border to change from green to black on hover. The CSS I tried doesn't work. How do ?

---

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

---

If anyone can also throw in some information about how the hover script is executed, it will be much appreciated.

Answer 1

Hi I noticed your html was incomplete and your css was too complex so I completed and simplified it by adding the ul element and styling the non-hover state for the 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

For that you have to use like:

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

I hope it would work.