'I have 5 div's and I want them to fill the parent div on mouse hover

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">
        &nbsp;
    </div>
    <div id="no2">
        &nbsp;
    </div>
    <div id="no3">
        &nbsp;
    </div>
    <div id="no4">
        &nbsp;
    </div>
    <div id="no5">
        &nbsp;
    </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;}
javascriptjqueryhtmlcsshover


Solution 1:[1]

Try this

I have used simple logic, Just applied height:0 to other div except the hovered div.

Solution 2:[2]

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">&nbsp;</div>
        <div id="no2" class="exp">&nbsp;</div>
        <div id="no3" class="exp">&nbsp;</div>
        <div id="no4" class="exp">&nbsp;</div>
        <div id="no5" class="exp">&nbsp;</div>
    </div>

</body>
</html>

Solution 3:[3]

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%'
            });

        });

    });
});

Solution 4:[4]

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/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tushar
Solution 2 General Grievance
Solution 3 BenMorel
Solution 4

Related Questions