在悬停时,我想增加我悬停的元素的宽度,但也减少其他2个元素的宽度

Question

我有一个我在这里嘲笑的部分:http://jsfiddle.net/josh_boothman/prry6g1r/

正如您所看到的,它被分成3个部分,这些部分是浮动的,宽度约为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/