Question

我有以下html：

<div class="products_lists">
    <div class="row">
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-globe"></span>
        </div>
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-import"></span>
        </div>
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-dashboard"></span>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-export"></span>
        </div>
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-link"></span>
        </div>
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-lock"></span>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-briefcase"></span>
        </div>
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-calendar"></span>
        </div>
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-plus"></span>
        </div>
    </div>
</div>

这是一个有3行3列的容器。当我将鼠标悬停在包含它们的div上时，我正在使用以下CSS在glyphicons上应用动画：

.products_lists .col-sm-4:hover .glyphicon-export{-webkit-animation: tada ease-in-out 1 normal 1000ms;-moz-animation: tada ease-in-out 1 normal 1000ms;-ms-animation: tada ease-in-out 1 normal 1000ms;animation: tada ease-in-out 1 normal 1000ms;}

上面的css规则虽然是glyphicon特定的......我正在尝试创建一个css规则，这个规则与glyphicon是通用的和无关的，但是我不能接缝来使这个工作......

我正在尝试的是：

 .products_lists .row:nth-child(1):hover .glyphicon{ }

任何人都可以提供一些帮助吗？

Answer 1

.products_lists .row:nth-child(1):hover .glyphicon {}

此选择器应该可以正常工作。

http://jsfiddle.net/mvg7L/

Answer 2

傻傻的我......

我忘了添加列的类。

.products_lists .row .col-sm-4:nth-child(1):hover .glyphicon

这是我想要的结果的小提琴，以防万一其他人感兴趣： http://jsfiddle.net/Xandour/aLj9D/

还添加了我正在使用的Animate库。

感谢您的帮助

带有Nth Childs的CSS选择器

2 个答案: