当我悬停一个子菜单时，如何改变向上三角形的背景色？
当我悬停一个子菜单时，如何改变向上三角形的背景色？
提问于 2014-05-09 07:00:13
Fiddle
#nav .submenu:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-bottom: 22px solid #b29600;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
margin: -12px 0 0 -55px;
}我已经把我的密码贴在小提琴上了。当我悬停一个主菜单时，它会显示子菜单。我在子菜单的顶部有一个向上三角形。当我悬停一个子菜单1时，它会改变bg颜色，但是向上三角形不会改变它的颜色。当我悬停子菜单1时，如何改变向上三角形的背景色？
回答 3
Stack Overflow用户
发布于 2014-05-09 07:13:54
你对JS解决方案没意见吗？您可以在悬停时添加/删除类，这将改变三角形的颜色。
演示：http://jsfiddle.net/lotusgodkk/buLy7/1/
$(document).ready(function () {
$('.submenu li a').on('mouseover', function () {
$(this).parents('.submenu:first').addClass('temp');
});
$('.submenu li a').on('mouseleave', function () {
$(this).parents('.submenu:first').removeClass('temp');
});
});我用temp类名来改变颜色。
CSS：
#nav .submenu.temp:before {
border-bottom: 22px solid red;/*Your color*/
}如果出现多个子菜单: JS：
$(document).ready(function () {
$('.a').on('mouseover', function () {
console.log('in');
$(this).parents('.submenu:first').addClass('temp');
});
$('.a').on('mouseleave', function () {
$('.temp').removeClass('temp');
});
});HTML：
<div id="nav">
<ul>
<li><a href="#">Main</a>
<ul class="submenu">
<li><a class="a" href="#">Sub 1</a>
</li>
<li><a href="#">Sub 2</a>
</li>
<li><a href="#">Sub 3</a>
</li>
<li><a href="#">Sub 4</a>
</li>
</ul>
</li>
<li><a href="#">Main</a>
<ul class="submenu">
<li><a class="a" href="#">Sub 1</a>
</li>
<li><a href="#">Sub 2</a>
</li>
<li><a href="#">Sub 3</a>
</li>
<li><a href="#">Sub 4</a>
</li>
</ul>
</li>
</ul>
</div>更改：：向.submenu中的第一个锚点添加了一个类，然后将事件绑定到它。
Stack Overflow用户
发布于 2014-05-09 07:29:16
试试这个。当您悬停一个子菜单时，它将更改三角形颜色。
#nav .submenu:hover:before { border-bottom: 22px solid #4C4000; }如果您想要为子菜单中的第一个选项指定特定选项，那么必须使用jQuery。
Stack Overflow用户
发布于 2014-05-09 08:02:06
如果将伪元素移动到第一个子元素LI，那么它在CSS中是可以实现的，如下所示：
#nav .submenu li:first-child:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-bottom: 22px solid #b29600;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
margin: -12px 0 0 -0px;
}
#nav .submenu li:first-child:hover:before { border-bottom: 22px solid #4C4000; }http://jsfiddle.net/36yqr/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23558426
复制相关文章
相似问题
腾讯云开发者
