div懸停對擴展的影響？

this is how the blocks look like div懸停對擴展的影響？

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

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

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


}

腳本...目前管理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); 
      }); 
});

來源

2016-10-13 junior

增加Width和Height在動畫節中添加
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>

來源

2016-10-13 14:54:32 cna327

爲u說..我用左：0 – junior

因爲你說我用左：0和刪除位置：相對來自兩協議，但現在的問題是...我用剩下的塊：0該塊正在向左擴展，這很棒，，但該塊正在與左邊的相鄰塊重疊... – junior

http://tinypic.com/r/2aj9s2r/9 – junior

div懸停對擴展的影響？

回答

相關問題