1

When I hover on top of #empresas is not affecting the height of the #personas div. Why's that?

HTML

     <div id="hugeBanners">

        <div id="personas">
            <h3 class="personasText1">Servicios Para ti</h3>
        </div>

        <div id="empresas">
            <h3 class="empresasText1">Servicios Para tu Empresa</h3>
        </div>

      </div>

CSS

#personas {
width: 100%;
height: 40%;
position: absolute;
top:20%;
background-color: green;
cursor: pointer;
transition: height 0.2s ease;
}

#personas:hover {
height: 70%;
}

#personas:hover ~ #empresas {
height: 10%;
}

#empresas {
width: 100%;
height: 40%;
position: absolute;
bottom: 0;
background-color: aqua;
cursor:pointer;
transition: height 0.2s ease;
}

#empresas:hover {
height: 70%;
}

#empresas:hover ~ #personas {
height: 10%;
}

What's happening because when you hover on top of #personas it works perfectly, resizing the height of #empresas.

Soolie
  • 1,812
  • 9
  • 21
Eugenio
  • 489
  • 3
  • 17
  • Because of relative heights may be? But **works fine for me: https://codepen.io/anon/pen/MELQEB** – Soolie Oct 19 '17 at 10:56
  • there is no previous sibling selector - unfortunately ~ means any following siblings – Pete Oct 19 '17 at 10:56
  • There is no way to affect a preceding element sibling with pure CSS, you can only affect adjacent (+) or general(~) **following** siblings. You would need a JavaScript solution if you want the second div to affect the first on hover. – delinear Oct 19 '17 at 10:56
  • thanks @Soolie But see if you hover on top of the bottom one it doesn't affect the top one. – Eugenio Oct 19 '17 at 11:11
  • @delinear I've tried first with javascript and it was working fine but someone I couldn't make it animate smoothly that's why I was trying with css – Eugenio Oct 19 '17 at 11:12
  • @Eugenio It works in the codepen... Kindly check. The top one gets reduced. I am using Chrome... – Soolie Oct 19 '17 at 11:12
  • @Eugenio you can still use CSS for the animation, just use JavaScript to add/remove a CSS class. – delinear Oct 19 '17 at 11:13
  • https://codepen.io/svitch/pen/QqYQox – Sergey Sklyar Oct 19 '17 at 11:14
  • SOLVED!! with this $(function() { $('#personas').hover(function() { $('#personas').css('height', '70%'); $('#empresas').css('height', '10%'); }, function() { // on mouseout, reset the background colour $('#personas').css('height', '40%'); $('#empresas').css('height', '40%'); }); }); – Eugenio Oct 19 '17 at 11:15

0 Answers0