背景大小过渡效果对nth-child不起作用

Question

我尝试将nth-child添加到下面的代码中，以便为每个div应用不同的背景图像。

之前标记：

<div class="coldiv">
    <div class="hoverimg">
        <!-- Contents 1 --> 
    </div>
</div>

<div class="coldiv">
    <div class="hoverimg">
        <!-- Contents 2 --> 
    </div>
</div>

CSS：

.coldiv {
    width:33.3%;
    padding:5px;
    float:left;
}

.hoverimg { 
    width:100%;
    height:200px;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    transition:all 0.4s ease;
    background:url(../img/bg_btn1.jpg) center center no-repeat;
    background-size:620px 200px;
}
.hoverimg.on {
    background-size:680px 219px;
}

我使用addClass添加.on类，它工作正常。

但是当我添加nth-child伪像

时

.coldiv:nth-child(1) .hoverimg { background:url(../img/bg_btn1.jpg) center center no-repeat; }

并从.coldiv { ~ }中移除背景属性，然后转换无效。

我也试过把id放在每个div而不是n-child上但是同样的事情发生了。

Answer 1

没关系。我找到了解决办法：）

我将这些属性分开，并且工作正常：

background-position:center center;
background-size:620px 200px;

Answer 2

您的样式转换有效改变

.hoverimg { 
    width:100%;
    height:200px;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    transition:width 0.4s ease;
    background-size:620px 200px;
     background:url("../img/bg_btn1.jpg") center center no-repeat; 
}
.coldiv:hover .hoverimg {
    background-size:680px 219px;
}