I have 5 div's and I want them to fill the parent div on mouse hover
Question
I have these 5 div's and I want them to fill the parent div on mouse hover I have these codes but they do not push the previous div (the div above) anywhere.
this is the HTML code:
<div id="photo">
<div id="no1">
</div>
<div id="no2">
</div>
<div id="no3">
</div>
<div id="no4">
</div>
<div id="no5">
</div>
and this is the CSS:
div#photo{
margin:10px 0;
padding:5px;
width:980px;
height:300px;
background-color:rgba(100,100,100,0.5);
border-radius:20px;
overflow:hidden;}
div#no1{
background-color:#FF00FF;}
div#no2{
background-color:#FF0;}
div#no3{
background-color:#00F;}
div#no4{
background-color:#0F0;}
div#no5{
background-color:#F00;}
div#no1, div#no2, div#no3, div#no4, div#no5{
width:970px;
height:61px;
transition:all 2s;}
div#no1:hover, div#no2:hover, div#no3:hover, div#no4:hover, div#no5:hover{
height:305px;}
5 answers
solution1
1 2013-09-30 20:52:21
This is how to implement Eugen's solution .
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
div#photo {
margin:10px 0;
padding:5px;
width:980px;
height:300px;
background-color:rgba(100, 100, 100, 0.5);
border-radius:20px;
overflow:hidden;
}
div#no1 {background-color:#FF00FF;}
div#no2 {background-color:#FF0;}
div#no3 {background-color:#00F;}
div#no4 {background-color:#0F0;}
div#no5 {background-color:#F00;}
div#no1, div#no2, div#no3, div#no4, div#no5 {
width:970px;
height:61px;
transition:all 2s;
}
.exp {height:305px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".exp").mouseenter(function () {
$(".exp").not(this).stop();
$(this).prevAll().animate({
height: "0px"
}, 2000, function () {
// Animation complete.
});
$(this).animate({
height: "305px"
}, 2000, function () {
// Animation complete.
});
});
$(".exp").mouseleave(function () {
$(".exp").not(this).stop();
$(".exp").animate({
height: "61px"
}, 200, function () {
// Animation complete.
});
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="photo">
<div id="no1" class="exp"> </div>
<div id="no2" class="exp"> </div>
<div id="no3" class="exp"> </div>
<div id="no4" class="exp"> </div>
<div id="no5" class="exp"> </div>
</div>
</body>
</html>
solution2
1 2013-10-01 11:15:28
I have used simple logic, Just applied height:0 to other div except the hovered div.
solution3
0 2013-09-30 20:49:29
Give every #noX id the same class, doesn't matter which name. For instance: .hoverPic.
$( document ).ready(function() {
$('.hoverPic').each(function(){ /*pick each element */
$(this).hover(function(){ /* do something on hover */
$(this).css({ /*set css value */
'width': '100%',
'height': '100%'
});
});
});
});
solution4
0 ACCPTED 2013-09-30 21:14:12
you can use jquery .mouseenter & .mouseleave events to do your job. here i made an example
solution5
-1 2013-09-30 20:38:41
you need to move the :hover selector to the parent and apply the styles to that states children . I'm not completely clear on your goal but this is how you would style it. Good luck and let me know if you need further help :)
div#photo:hover > div{
height:305px;
}
DEMO http://jsfiddle.net/59Uph/
EDIT
Try something along the lines of this http://jsfiddle.net/59Uph/2/
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.