css hover使用条件

1:必须是其子元素才可以使用；

举例：

css：

正确：.group-goodsList ul li:hover .msct{background-color: #ff4000;color: #FFFFFF}

错误：.group-goodsList ul li div:nth-child(1)  img:hover .msct{background-color: #ff4000;color: #FFFFFF}
理由是因为.msct这个class代表的button标签并不是img这个dom元素的子标签所以不对；

HTML：

<ul class="clearfix">
    <li class="mb32" >
        <div>
            <img src="__ROOT__/Apps/Home/View/default/audio/goods.jpg" alt="" />
        </div>
        <div class="group-goodsContent">
            <div>
                <a title="简约大气  经典设计 超高性价比 1.8米环保皮艺双人床床超高性价比 1.8米环保皮艺双人床床" class="text-over">简约大气  经典设计 超高性价比 1.8米环保皮艺双人床床超高性价比 1.8米环保皮艺双人床床</a>
            </div>
            <div class="clearfix" style="margin-top: 12px;">
                <div class="group-goodsContent-price"><span>￥</span><span>2999.00</span></div>
                <div class="group-goodsContent-oddPrice">
                    <div><span style="text-decoration: line-through">3999.00</span></div>
                    <div><span>5件已抢购</span></div>
                </div>
                <div class="group-goodsContent-addGroup"><button class="msct">马上参团</button></div>
            </div>
        </div>
    </li>
</ul>