HTML 两个悬停效果不起作用

Question

所以我正在为网站创建一个菜单，但我无法同时使用这两种悬停效果。我希望当我将鼠标悬停在名称上时，字母会变亮 + 名称下方的白色块应该淡入（不适用于活动名称）但我只得到第一个效果......

这是要看的Jsfiddle。感谢所有帮助:)

HTML:

<body>

    <div id="cssmenu">
        <ul>
            <li class='active'><a href='#'><span>Home</span></a></li>
            <li><a href='#'><span>Products</span></a></li>
            <li><a href='#'><span>Company</span></a></li>
            <li class='last'><a href='#'><span>Contact</span></a></li>
        </ul>
    </div>

</body>

CSS:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);

html { 
  background: url(img/bodybg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#cssmenu {
  background: rgba(51,51,51,0.5);
  height: 0.3%;
  text-align: center;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}
#cssmenu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
#cssmenu ul li a {
  color: #C8C8C8;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;

  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;


}
/*Hover Effekt */
#cssmenu ul li a:hover {
  color: #FFFFFF;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:before:hover {
  opacity: 100%;
}
/* Kleiner Block nach jeder Spalte */
#cssmenu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #E6E6E6;
  opacity: .5;
}

/*"Effekt2"*/
#cssmenu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: #FFFFFF; 
  opacity: 100%;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -ms-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

/*Aktive Seite Schrift weiß und "Effekt2" aktive*/
#cssmenu ul li.active a {
  color: #FFFFFF;
}
#cssmenu ul li.active a:before {
  width: 100%;
}

演示：jsfiddle.net/xwrfmtua

Answer 1

如果你将 hover 添加到 #cssmenu ul li a:before class 你开始得到你想要的了吗？

像这样：

cssmenu ul li a:hover:before

HTML 两个悬停效果不起作用

HTML two hover Effects don't work

html

transition

hover

effect

cssmenu ul li a:hover:before