html - css中的悬停变化效果

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 的后代即可

JSFiddle