CSS抑制要素

Question

私はサイトの終わりにリンクボックスを持つ単純な1ページのサイトを持っています。

これが私のHTMLです：これは私のCSSで

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

：ボックスのいずれかをホバリングした後

.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/