Question

this is how the blocks look like

if i mouseover on test1 with hover effect ,it covers all block to its right but doesnot maximize full covering all block...i need solution for this

self.desc.bind("<Configure>", 
    lambda event: event.widget.configure(width=event.width-8))

CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
    <script type=text/javascript src="jquery-1.11.0.min.js"></script>
    <script type=text/javascript src="avc.js"></script>
    <link href="amcstyle.css" rel="stylesheet" />
</head>
<body>

    <div class="twocol">
        <div class="inside">test0</div>
       </div>

    <div class="twocol">
        <div class="inside1">Test1</div>
    </div>
    <div class="twocol">
        <div class="inside2">Test3</div>
    </div>
    <div class="twocol">
        <div class="inside3">Test4</div>
    </div>
    <div style="clear:both"></div>
    <div class="twocol">
        <div class="inside4">Test5</div>
    </div>
    <div class="twocol">
        <div class="inside5">Test6</div>
    </div>
    <div class="twocol">
        <div class="inside6">Test7</div>
    </div>                  

</body>
</html>

脚本...目前管理div的扩展和大小我为每个

编写了单独的脚本函数

.twocol {
    float: left;
    width: 150px;
    height: 150px;
    position: relative;
    padding: 10px;
}
.twocol1 {
    width: 100px;
    height: 100px;
    position: relative;
    padding: 10px;
    background-color:pink;
}
.inside {
    position: absolute;
    border: 1px solid #000;
    width: 150px;
    height: 150px;
    background: #eee;
    z-index: 900;
}
.inside:hover {
    position: absolute;
    z-index: 999;
transition: 0.5s ease;


}

Answer 1

在动画部分中增加Width和Height添加
inside:hover{left:0}从左侧覆盖并删除.twocol {position:relative} .. 让我知道这就是你要找的东西

＆＃13;

$(document).ready(function () {

    $('.inside').hover(

            function () {
                $(this).animate({
                    height: '400px',
                    width: '400px'
                }, 200);
            },

            function () {
                $(this).animate({
                    height: '150px',
                    width: '150px'
                }, 200);
            });
});

$(document).ready(function () {

    $('.inside1').hover(

            function () {

                $(this).animate({
                    height: '500px',
                    width: '900px'
                }, 200);

            },

            function () {
                $(this).animate({
                    height: '150px',
                    width: '150px'
                }, 200);
            });
});
$(document).ready(function () {

    $('.inside2').hover(

            function () {
                $(this).animate({
                    height: '320px',
                    width: '320px'
                }, 200);
            },

            function () {
                $(this).animate({
                    height: '150px',
                    width: '150px'
                }, 200);
            });
});

$(document).ready(function () {

    $('.inside3').hover(

            function () {
                $(this).animate({
                    height: '320px',
                    width: '150px'
                }, 200);
            },

            function () {
                $(this).animate({
                    height: '150px',
                    width: '150px'
                }, 200);
            });
});

$(document).ready(function () {

    $('.inside4').hover(

            function () {
                $(this).animate({
                    height: '155px',
                    width: '500px'
                }, 200);
            },

            function () {
                $(this).animate({
                    height: '150px',
                    width: '150px'
                }, 200);
            });
});

$(document).ready(function () {

    $('.inside5').hover(

            function () {
                $(this).animate({
                    height: '155px',
                    width: '320px'
                }, 200);
            },

            function () {
                $(this).animate({
                    height: '150px',
                    width: '150px'
                }, 200);
            });
});
$(document).ready(function () {

    $('.inside6').hover(

            function () {
                $(this).animate({
                    height: '150px',
                    width: '320px',
                  left:'0'
                }, 200);
            },

            function () {
                $(this).animate({
                    height: '150px',
                    width: '150px',
                  left:'0'
                }, 200);
            });
});

＆＃13;

.twocol {
    float: left;
    width: 150px;
    height: 150px;
    padding: 10px;
}
.twocol1 {
    width: 100px;
    height: 100px;
    padding: 10px;
    background-color:pink;
}
.inside {
    position: absolute;
    border: 1px solid #000;
    width: 150px;
    height: 150px;
    background: #eee;
    z-index: 900;
}
.inside:hover {
    position: absolute;
    z-index: 999;
transition: 0.5s ease;


}
.inside1 {
    position: absolute;
    border: 1px solid #000;
    width: 150px;
    height: 150px;
    background: #eee;
    z-index: 900;
}
.inside1:hover {
    position: absolute;
    z-index: 999;
transition: 0.5s ease;
left:18px;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
    <script type=text/javascript src="jquery-1.11.0.min.js"></script>
    <script type=text/javascript src="avc.js"></script>
    <link href="amcstyle.css" rel="stylesheet" />
</head>
<body>

    <div class="twocol">
        <div class="inside">test0</div>
       </div>

    <div class="twocol">
        <div class="inside1">Test1</div>
    </div>
    <div class="twocol">
        <div class="inside2">Test3</div>
    </div>
    <div class="twocol">
        <div class="inside3">Test4</div>
    </div>
    <div style="clear:both"></div>
    <div class="twocol">
        <div class="inside4">Test5</div>
    </div>
    <div class="twocol">
        <div class="inside5">Test6</div>
    </div>
    <div class="twocol">
        <div class="inside6">Test7</div>
    </div>                  

</body>
</html>

＆＃13;

div悬停对扩张的影响？

1 个答案: