css中的Onhover更改效果

Question

我已经创建了带有图像、链接、标题和一些值的框。我想在鼠标悬停时产生效果。

下面我添加了要做的类：

Fiddle example

但它不会产生效果。怎么了。

这样做是错误的吗？

.c1:hover{

.item .moreBtn{position: relative;font-size: 14px;margin-right: 10px;margin-top: 32px;}  

.item .pillBtn{-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;background:#7CDD97;padding: 10.5px 40px 8.0px 40px;color: #FFF;font-weight: bold;font-size: 20px;text-decoration: none;}

    .item h6 {margin-top: 18px;}

    .item{background:#F3F3F3;height: 70px;-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;}

}

Answer 1

你不能用纯CSS来嵌套样式。您可以使用像SASS这样的预处理器来做到这一点

您的纯CSS可能如下所示：

.item:hover .moreBtn {
    position: relative;
    font-size: 14px;
    margin-right: 10px;
    margin-top: 32px;
}
.item:hover .pillBtn {
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    background:#7CDD97;
    padding: 10.5px 40px 8.0px 40px;
    color: #FFF;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
}
.item:hover {
    background:#F3F3F3;
    height: 70px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

只要.moreBtn和.pillBtn是.item的后代

Answer 2

您可以在纯CSS中使用嵌套CSS样式。

您需要像这样使用伪类:hover：

.item:hover .moreBtn { ... }     
.item:hover .pillBtn { ... }
.item:hover { ... }

Answer 3

您需要在width属性上使用Transition: Transition效果，持续时间:2秒：

.item{
transition:width 2s;
}

&

.item:hover{
height:200px;
background-color:red;
}