Javascript 当鼠标位于子元素上时，如何设置父元素的样式？

当我将鼠标悬停在导航栏下面列出的任何一位上时，尝试使导航栏的顶部位改变文本颜色

HTML

这在纯CSS中可能吗？如果不是，我如何使用Javascript或其他东西轻松实现这一点

---

编辑：将鼠标悬停在上方时，文本将变为白色，而背景将变为绿色。后者仍然存在，但前者没有。我想这就是问题所在

在CSS中将子对象悬停时，不能选择父对象，只能选择位于子对象或子对象之后的同级对象

但是，我认为只需悬停父事件就可以了，因为当您悬停子对象时，父对象也会悬停。添加以下内容：

navMenu li:将鼠标悬停在{color:FFF；}

---

在CSS中悬停子对象时不能选择父对象，只能选择子对象或子对象之后的同级对象

但是，我认为只需悬停父事件就可以了，因为当您悬停子对象时，父对象也会悬停。添加以下内容：

navMenu li:将鼠标悬停在{color:FFF；} 你在问题上加了标签。请显示您正在使用的任何JS。您标记了您的问题。请显示您正在使用的任何JS。

<div id="wrapper">
    <div id="navMenu">
        <ul>
            <li><a href="#">Home</a></li>
        </ul>
        <ul>
            <li><a href="#">example1</a>
                <ul>
                    <li><a href="#">example1.1</a></li>
                    <li><a href="#">example1.2</a></li>
                    <li><a href="#">example1.3</a></li>
                    <li><a href="#">example1.4</a></li>
                    <li><a href="#">example1.5</a></li>
                </ul>
            </li>
        </ul>

        <br class="clearFloat" />

    </div> <!-- end navMenu div -->
</div> <!-- end wrapper div -->

#navMenu {margin:0;padding:0;}
#navMenu ul {margin:0;padding:0;line-height:30px;}
#navMenu li {margin:0;padding:0;list-style:none;float:left;position:relative;background:#999;}
#navMenu ul li a {text-align:center;text-decoration:none;height:30px;width:150px;display:block;color:#060;border:1px solid #666;}
#navMenu ul ul {position:absolute;visibility:hidden;top:32px;}
#navMenu ul li:hover ul {visibility:visible;}
#navMenu li:hover {background:#060;}
#navMenu ul li:hover ul li a:hover {background:#CCC;color:#FFF;}
#navMenu a:hover {color:#FFF;}
.clearFloat {clear:both;margin:0;padding:0;}