CSS suppress Element

Question

Ich habe eine einfache Seite mit einer Seite mit Link-Boxen am Ende der Website.

Das ist mein HTML:

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

Das ist mein CSS ist:

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

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

Nach schwebt einer der Kisten, sollte die Box größer werden und drücken Sie die andere Box aus dem Bildfenster. Wie folgt aus:

Gibt es eine Möglichkeit, dies mit CSS zu lösen oder muss ich Javascript verwenden?

Answer 1

Wir können keine vorherigen Geschwister mit CSS auswählen, so ist es mit JavaScript oder einigen FrameJQuery möglich.

$(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

Eine reine CSS-Lösung:

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