Question

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;
}

我在jsfiddle上发布了我的代码。当我将鼠标悬停在主菜单上时，它将显示子菜单。我在子菜单的顶部有一个向上的三角形。当我将鼠标悬停在子菜单1上时，它会改变bg颜色但是，向上的三角形不会改变其颜色。当我将鼠标悬停在子菜单1上时，如何更改向上三角形的背景颜色？

Answer 1

你对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中添加了第一个锚点的类，然后将事件绑定到它。

Answer 2

试一试。当您将鼠标悬停在子菜单上时，它将更改三角形颜色。

#nav .submenu:hover:before {  border-bottom: 22px solid #4C4000; }

如果您想要特定于子菜单中的First选项，那么您必须使用jQuery。

Answer 3

如果将伪元素移动到第一个孩子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/

当我将一个子菜单悬停时，如何更改三角形的背景颜色

3 个答案: