div悬停对扩展有影响吗？

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 如果我将鼠标悬停在具有悬停效果的test1上，它会覆盖其右侧的所有块，但不会最大化覆盖所有块的数量...我需要为此解决方案

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

css 的CSS

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


}

script... currently to manage the expansion and size of the div i have written seperate script function for each 脚本...目前用于管理div的扩展和大小，我已经为每个脚本编写了单独的脚本函数

$(document).ready(function () {

    $('.inside').hover(

            function () {
                $(this).animate({
                    height: '320px',
                    width: '660px'
                }, 200);
            },

            function () {
                $(this).animate({
                    height: '150px',
                    width: '150px'
                }, 200);
            });
});

$(document).ready(function () {

    $('.inside1').hover(

            function () {

                $(this).animate({
                    height: '320px',
                    width: '500px'

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

            function () {
                $(this).animate({
                    height: '150px',
                    width: '150px'
                }, 200);
            });
});

Answer 1

Increase Width and Height in animate section add 增加动画部分的Width和Height
inside:hover{left:0} to cover from left side and also remove .twocol {position:relative} .. let me know this is what you looking for inside:hover{left:0}以从左侧遮盖并删除.twocol {position:relative} ..让我知道这是您想要的

 $(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); }); });

 .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; }

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

div悬停对扩展有影响吗？

问题描述

1 个解决方案

解决方案1
0 2016-10-13 14:54:32

div悬停对扩展有影响吗？

问题描述

1 个解决方案

解决方案1 0 2016-10-13 14:54:32

解决方案1
0 2016-10-13 14:54:32