CSS - 使用多个类的悬停效果 [英] CSS - using multiple classes for hover effect
问题描述
我正尝试向导航栏的悬停状态添加一个小三角形。
I am trying to add a mini triangle to the hover state of navigation bar.
HTML:
<div id="menu_bars">
<div id="main_bar">
<ul>
<li class="maintabs maintabs_tri"><a href="#">Over</a></li>
<li class="maintabs maintabs_tri"><a href="#">Collar</a></li>
<li class="maintabs maintabs_tri"><a href="#">Bod</a></li>
</ul>
</div>
<div id="css_arrow" class="maintabs_tri"><a href="#"></a>
</div>
</div>
'main_bar'div创建一个水平导航菜单。
div id'css_arrow'正在用于创建一个箭头,它将显示悬停状态。
我游戏他们所有的类'maintabs_tri',其中包括三角形和'main_tab'导航菜单,以便当悬停状态变为活动时,三角形出现在导航栏上。
The 'main_bar' div creates a horizontal navigation menu. The div id 'css_arrow' is being use to create an arrow which will show up on hover state. I game them all a class called 'maintabs_tri' which includes the triangle and the 'main_tab' navigation menu, so that when the hover state becomes active, the triangle appears on the navigation bar.
CSS:
/* START OF MAIN BAR */
#main_bar ul {
float: left;
width: 630px;
height: 48px;
}
.maintabs {
display: inline-block;
width: 25%;
list-style-type: none;
background: rgba(237,237,237,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(237,237,237,1));
background: -webkit-gradient(linear, top, bottom, from(rgba(255,255,255,1)), to(rgba(237,237,237,1)));
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
-webkit-transition-property:
}
.maintabs:first-child {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.maintabs:last-child {
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.maintabs a {
display: block;
text-decoration: none;
text-align: center;
vertical-align: middle;
line-height: 14px;
text-shadow: 0px 1px 2px rgba(0,0,0,0.3);
padding: 18px 0px;
}
.maintabs ul {
display: none;
list-style-type: none;
}
.maintabs ul li a {
text-decoration: none;
}
/* END OF MAIN BAR */
/* TRIANGLE ------ for testing, to be used with hover later */
#css_arrow {
border-color: transparent transparent rgba(111,46,11,0.0) transparent;
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
position: absolute;
top: 34px;
left: 78px;
}
.maintabs_tri a:hover {
border-color: transparent transparent rgba(111,46,11,1) transparent;
}
有人可能分享为什么这不工作吗?我不能想出我的生活...
Could someone share why this is not working? I cannot figure out for the life of me...
推荐答案
添加到 .maintabs_tri a:hover
这篇关于CSS - 使用多个类的悬停效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!