將鼠標懸停在除第一個元素之外的所有元素上

Question

我有各種各樣的元素，當我將它們懸停時，除了第一個孩子以外，我都希望它們都有背景。

這是我的CSS選擇器：

#OfficeUI .iconHolder img:hover:not(:first-child) { background-color: #CDE6F7; }

這怎么了

相關HTML

        <div class="officeui-position-absolute iconHolder">
            <!-- Provides the images on the top left of the ribbon. -->
            <top-Images-Container>
                <span ng-repeat="icon in icons">
                    <img src="{{icon.Icon}}" />
                </span>
            </top-Images-Container>    
        </div>

Answer 1

 p:not(:first-child):hover {background-color: red;} 

 <p>first</p> <p>second</p> <p>third</p> 

Answer 2

您可以使用第nth-child選擇器。 n+2使其選擇除第一個元素以外的所有元素。

 li:nth-child(n+2):hover { color:red; } 

 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> 

Answer 3

或者，您可以使用：

    #OfficeUI .iconHolder img:nth-child(n + 2):hover