Question

我有这5个div并且我希望它们在鼠标悬停时填充父div我有这些代码但是它们不会将前一个div（上面的div）推到任何地方。

这是HTML代码：

<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>

这是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;}

Answer 1

这是如何实现Eugen的解决方案。请接受他的解决方案作为正确的答案，而不是这个。

<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>

Answer 2

Try this

我使用了简单的逻辑，只是应用高度：0到除了悬停的div之外的其他div。

Answer 3

为每个#noX id赋予相同的类，无论哪个名称都无关紧要。例如：.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%'
            });

        });

    });
});

Answer 4

你可以使用jquery .mouseenter＆amp; .mouseleave事件来完成你的工作。我在这里做了一个example

Answer 5

您需要将：hover选择器移动到父级，将样式应用于子级。我对你的目标并不完全清楚，但这就是你的风格。祝你好运，如果你需要进一步的帮助，请告诉我。）

div#photo:hover > div{
    height:305px;
}

样本 http://jsfiddle.net/59Uph/

修改

尝试一下这个问题 http://jsfiddle.net/59Uph/2/

我有5个div，我希望它们在鼠标悬停时填充父div

5 个答案: