悬停时边框更改颜色

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

希望有用。

悬停时边框更改颜色

Border change color on hover

html

css

prestashop-1.6