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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.