cssmenu ul li a：hover：before

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：在课前你开始得到你想要的东西吗？

这样的事情：

cssmenu ul li a：hover：before

HTML两种悬停效果无法正常工作

1 个答案:

cssmenu ul li a：hover：before