Question

我创建了包含图片，链接，标题和一些值的框。我想在鼠标悬停/悬停上创建效果。

我在这里添加了要做的课程：

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

这样做是错误的吗？

.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

Answer 2

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

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

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

Answer 3

您需要使用Transition：对width属性的过渡效果，持续时间：2秒：

.item{
transition:width 2s;
}

＆安培;

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

onhover在css中的变化效果

3 个答案: