CSS抑制元素

Question

我有一个简单的单页网站，其中包含网站末尾的链接框。

这是我的HTML：

<div class="link-wrapper">
    <div class="link-box">
         Galerie
    </div>
    <div class="link-box">
         Shop
    </div>
</div>

这是我的CSS：

.link-wrapper {
    height: 40%;
    width: 100%;
}

.link-box {
    height: 100%;
    width: 50%;
    float: left;
}

将鼠标悬停在其中一个框后，框应该变大，并将另一个框推出视口。像这样：

有没有办法用CSS解决这个问题，还是我必须使用Javascript？

Answer 1

我们无法使用css选择以前的兄弟，因此可以使用JavaScript或类似框架的jQuery。

$(function() {
  $('.link-box.left').hover(
    function() {
        $('.link-box.right').toggleClass('right-out');
    }
  );
  $('.link-box.right').hover(
    function() {
        $('.link-box.left').toggleClass('left-out');
    }
  );
});

html,
body {
    height: 100%;
}
body {
    margin: 0;
}
.link-wrapper {
    overflow: hidden;
    position: relative;
    height: 40%;
    width: 100%;
}

.link-box {
    transition: width 0.4s linear, right 0.4s linear, left 0.4s linear;
    position: absolute;
    background: #0f0;
    height: 100%;
    width: 50%;
    left: 0;
}

.link-box.right {
    background: #f00;
    left: auto;
    right: 0;
}

.link-box.left-out {
    left: -50%;
}

.link-box.right-out {
    right: -50%;
}

.link-box:hover {
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="link-wrapper">
    <div class="link-box left">
         Galerie
    </div>
    <div class="link-box right">
         Shop
    </div>
</div>

Answer 2

纯css解决方案：

<div class="link-wrapper">
<div class="link-box" id="toGallery">
     Galerie
</div>
<div class="link-box" id="toShop">
     Shop
</div>

.link-wrapper {
    height: 40%;
    width: 100%;
    transition: all 1s ease-in
}
.link-wrapper:hover {
  margin-left: -10%
}
.link-box {
    height: 100%;
    width: 40%;
    float: left;
    transition: all 1s ease-in
}
div#toGallery:hover {
  margin-left:10%;
  margin-right:10%;
}
div#toShop:hover {
  margin-left:10%;
}

https://jsfiddle.net/405p5o0o/1/