javascript - 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;
}

将其中一个框悬停后，框应该变大并将另一个框推出视口(viewport)。像这样:

有没有办法用 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>