0

我有这 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;}
4

5 回答 5

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>
于 2013-09-30T20:52:21.550 回答
1

尝试这个

我使用了简单的逻辑，只是将 height:0 应用于除悬停的 div 之外的其他 div。

于 2013-10-01T11:15:28.217 回答
0

给每个#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%'
            });

        });

    });
});
于 2013-09-30T20:49:29.293 回答
0

您可以使用 jquery.mouseenter和.mouseleave事件来完成您的工作。这里我做了一个例子

于 2013-09-30T21:14:12.653 回答
-1

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

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

演示 http://jsfiddle.net/59Uph/

编辑

按照这个 http://jsfiddle.net/59Uph/2/尝试一些东西

于 2013-09-30T20:38:41.780 回答