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/

Answer 2

将以下内容添加到.contact-col：

.contact-col {
  ...

  .contact-container:hover & {
    width: calc(100% / 3 / 2);

    &:hover {
      width: calc(100% / 3 * 2);
    }
  }

  ...
}

http://jsfiddle.net/prry6g1r/6/

逻辑是，在容器悬停时，您会减小所有列的宽度，但悬停的列会增加宽度，从而覆盖容器的宽度。

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

2 个答案: