css - 悬停时，我想增加我悬停的元素的宽度，同时减少其他 2 个元素的宽度

Question

我在这里模拟了一个部分:http://jsfiddle.net/josh_boothman/prry6g1r/

如您所见，它分为 3 个 float 部分，宽度约为 33.3%。我想要实现的是，当一个特定的元素悬停在上面时，例如 .col-one 在我的示例中，我希望该元素的宽度增加到 50%，而其余 2 个未悬停的元素将分别减少到 25% .

/* SCSS */

.contact {
background: #414141;
height: 600px;
width: 90%;
margin: 0 auto;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}

.contact-container {
width: 100%;
height: 100%;
}

.contact-col {
width: calc(100% / 3);
height: 100%;
float: left;
display: inline;
@include transition(all, 0.6s);

    &:hover {
    background: rgba(248, 220, 93, 0.6);
    }
}
.contact-option {
text-align: center;
color: white;
@include vertical-align;

    h5 {
    font-size: 30px;
    text-transform: uppercase;
    padding: 0 0 25px 0;
    }
}

Answer 1

您需要使用多个悬停:

.contact-container {
    width: 100%;
    height: 100%;

    &:hover {
        .contact-col {
            width: 25%;

            &:hover {
                width: 50%;
            }
        }
    }
}

http://jsfiddle.net/prry6g1r/3/