CODEWITHSUNDEEP
javascriptjqueryhtmlcss
susanloek
susanloek

Reputation: 411

CSS suppress element

I have a simple one-page site with to link-boxes at the end of the site.

enter image description here

This is my HTML:

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

This is my CSS:

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

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

After hovering one of the boxes, the box should get larger and push the other box out of the viewport. Like this:

enter image description here

Is there a way to solve this with CSS or do I have to use Javascript?

Upvotes: 1

Views: 158

Answers (2)

Mohammad Usman
Mohammad Usman

Reputation: 39322

We can't select previous sibling with css so it is possible with JavaScript or some framelike 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>

Upvotes: 2

Erik
Erik

Reputation: 316

A pure css solution:

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

Upvotes: 1

Related Questions