如何使悬停类与活动类相同

Here is the fiddle: http://jsfiddle.net/outpbj3c/2/

这是小提琴:http://jsfiddle.net/outpbj3c/2/

HTML:

<ul class="mcd-menu">
    <li>
        <a href=""><strong>Home</strong></a>
    </li>
    <li>
        <a href="" class="active"><strong>About us</strong></a>
    </li>
    <li>
        <a href=""> <strong>About us</strong></a>
    </li>
</ul>

I would like assistance with two things:

我想要两件事的帮助:

1. How can I center the text vertically which aligns with the arrow

如何将文本垂直居中,与箭头对齐

2. How can I make the hover class same as the active class

如何使悬停类与活动类相同

2 个解决方案

#1

I took the liberty of re-writing that CSS.

我冒昧重写那个CSS。

http://jsfiddle.net/outpbj3c/7/ (edited the code)

http://jsfiddle.net/outpbj3c/7/(编辑代码)

body{
    background: #DEDEDE;
}

ul.mcd-menu{
    list-style-type: none;
    width: 200px;
    margin: 0px;
    padding: 0px;
}

ul.mcd-menu li{
    display: block;
    margin-bottom: 1px;
    background: #FFF;    
    text-transform: uppercase;

}

ul.mcd-menu li a{
    padding: 0px 20px;
    line-height: 50px;
    text-decoration: none;
    display: block;
    position: relative;
    color: #999;
    margin-left: 0px;
    margin-right: 0px; 
    transition: color 300ms linear;
    -o-transition: color 300ms linear;
    -ms-transition: color 300ms linear;
    -moz-transition: color 300ms linear;
    -webkit-transition: color 300ms linear;  
}

ul.mcd-menu li a.active, ul.mcd-menu li a:hover{
      border-left: 4px solid #e67e22;
      border-right: 4px solid #e67e22;  
      margin-left: -4px;
      margin-right: -4px;
      color: #e67e22;
      box-sizing: border-box;
}

ul.mcd-menu li a.active:before, ul.mcd-menu li a:hover:before{
      content: "";
      position: absolute;
      top: 42%;
      left: 0;
      border-left: 5px solid #e67e22;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;    
}


ul.mcd-menu li a.active:after, ul.mcd-menu li a:hover:after{
      content: "";
      position: absolute;
      top: 42%;
      right: 0;
      border-right: 5px solid #e67e22;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent; 
}

#2

As mentionned in the comments use the same style for both .active and :hover, so add .mcd-menu li a:hover to the .active style and give the strong elment margin-top: 9px; and you will get what you need, your code should be like this:

正如评论中提到的,对.active和:hover使用相同的样式,所以添加.mcd-menu li a:将鼠标悬停在.active样式并给出强大的元素margin-top:9px;并且你会得到你需要的东西,你的代码应该是这样的:

.mcd-menu li a strong {
  display: block;
  text-transform: uppercase;
  margin-top: 9px;
}

And :

.mcd-menu li a.active, .mcd-menu li a:hover {
   position: relative;
   color: #e67e22;
   border:0;
   /*border-top: 4px solid #e67e22;
   border-bottom: 4px solid #e67e22;
   margin-top: -4px;*/
   box-shadow: 0 0 5px #DDD;
   -moz-box-shadow: 0 0 5px #DDD;
   -webkit-box-shadow: 0 0 5px #DDD;

   /* == */
   border-left: 4px solid #e67e22;
   border-right: 4px solid #e67e22;
   margin: 0 -4px;
   /* == */
 }

Here's the updated fiddle.

这是更新的小提琴。