當鼠標位於子元素上時如何設置父元素的樣式？

Question

當我將鼠標懸停在其下方的任何列出的位上時，試圖讓導航欄的頂部位改變文本顏色。

HTML

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

CSS

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

這在純CSS中是否可行？ 如果沒有，我將如何使用Javascript或其他東西輕松地完成這項工作？

編輯：當您將鼠標懸停在背景變為綠色時，文本會變為白色。 后者仍然存在，但前者沒有。 我認為這就是問題所在。

Answer 1

將孩子懸停在CSS中時，無法選擇父級，只能選擇后來的兄弟姐妹或后代。

但是，我認為你只會懸停父級事件就好了，因為當你將孩子懸停在父母身上時，父母也會懸停。 添加這個：

的jsfiddle

#navMenu li:hover a {color:#FFF;}