CODEWITHSUNDEEP
jqueryhtmlcss
Akheel K M
Akheel K M

Reputation: 170

css hover over one element change the property of another element

I understand there are other questions that answer this. But my question is specifically to my problem.

<html>


<body>

<div id="hello">

<div id="s1"></div>
<div id="s2"></div>
<div id="s3"></div>
<div id="s4"></div>

</div>

</body>

<style>

#hello
{
top : 0;
left : 0;
width : 100%;
height : 100%;
/*overflow : hidden;*/
background : #ccc;
}

#s1,#s2,#s3,#s4
{
position: relative;
display : inline-block;
height : 100%;
width : 24.8%;
padding  : 0;
margin : 0;
transition : width 0.5s;
}

#s1
{background : red;}
#s2
{background : yellow;}
#s3
{background : blue;}
#s4
{background : green;}


#s1:hover
{width : 28.8%;}


#s1:hover + #s2 
{width : 20.8%;}


#s2:hover
{width : 28.8%;}

#s2:hover + #s3
{width : 20.8%;}



#s3:hover
{
width : 28.8%;

}

#s3:hover + #s4
{
width : 20.8%;
}


#s4:hover
{
width : 28.8%;

}



#s4:hover + #s3
{
width : 20.8%;  
}

It's working everywhere except the last div s4. The div s4 is getting bigger on hover, but the div s3 is not getting smaller. And thanks for any reply.

I would've put up a jsfilddle, but couldn't seem to get it to work.

Upvotes: 1

Views: 193

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

You could use jQuery to do this.

$('.s').hover(function() {
    $(this).css('width', '29%');
    ($(this).index() == $('.s').length - 1) ? $(this).prev().css('width', '21%'): $(this).next().css('width', '21%');
  },
  function() {
    $(this).css('width', '25%');
    ($(this).index() == $('.s').length - 1) ? $(this).prev().css('width', '25%'): $(this).next().css('width', '25%');
  })
#hello {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*overflow : hidden;*/
  background: #ccc;
}
#s1, #s2, #s3, #s4 {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 25%;
  padding: 0;
  margin: 0;
  transition: width 0.5s;
}
#s1 {
  background: red;
}
#s2 {
  background: yellow;
}
#s3 {
  background: blue;
}
#s4 {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hello">
  <div class="s" id="s1">s1</div
  ><div class="s" id="s2">s2</div
  ><div class="s" id="s3">s3</div
  ><div class="s" id="s4">s4</div>
</div>

Upvotes: 3

Related Questions