HTML 两个悬停效果不起作用
Posted
技术标签:
【中文标题】HTML 两个悬停效果不起作用【英文标题】：HTML two hover Effects don't work 【发布时间】：2016-08-04 08:09:28 【问题描述】：所以我正在为一个网站创建一个菜单，但我无法让这两种悬停效果同时工作。我希望当我将鼠标悬停在名称上时，字母会变亮+名称下的白色块应该淡入（不适用于活动的），但我只能得到第一个效果......
这是要查看的 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
【问题讨论】：
【参考方案1】：如果你在#cssmenu ul li a:before 类中添加悬停，你会开始得到你想要的吗？
类似这样的：
cssmenu ul li a:hover:before
【讨论】：
以上是关于HTML 两个悬停效果不起作用的主要内容，如果未能解决你的问题，请参考以下文章