在鼠標懸停在該div中心的圖像上展開div

Question

我是網頁設計新手，我想將4個div放在水平方向，每個div的中心有一個小圖像;當鼠標懸停在該圖像上時，該div應放大顯示更多內容。 這裏是一個 '加號' 形象鏈路

http://www.nike.com/etc/designs/nike/pes/images/plus.png

<div id="hov_text" 
    style="position: relative; width: 1350px; height: 400px; margin- top: 20px;"> 
    <div id="ord1"> 
     <h3 style="padding-left: 50px; padding-right: 20px; color: black;">SHOES</h3> 
     <h5 style="padding-left: 50px; padding-right: 20px;">MEN'S SHOES</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Running</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Basketball</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">NikeiD</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Soccer</h5> 
     <img class="ord1_img" 
      style="height: 20px; margin-left: 100px; width: 30px;" 
      src="img/plus.png" /> 
     <hr> 
    </div> 
    <div id="ord2" 
     style="margin-top: 20px; margin-left: 10px; float: left; width: 20%; height: 200px; background-color: #ffffff; border-right: 2px solid #d9d8cd;"> 
     <h3 style="padding-left: 50px; padding-right: 20px; color: black;">Clothing</h3> 
     <h5 style="padding-left: 50px; padding-right: 20px;">MEN'S 
      CLOTHING</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">T-Shirts</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Jackets & 
      Vests</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Hoddies & 
      Swetshirts</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Pants</h5> 
     <img class="ord1_img" 
      style="height: 20px; margin-left: 100px; width: 30px;" 
      src="img/plus.png" /> 
     <hr> 
    </div> 
    <div id="ord3" 
     style="margin-top: 20px; margin-left: 10px; float: left; width: 20%; height: 200px; background-color: #ffffff; border-right: 2px solid #d9d8cd;"> 
     <h3 style="padding-left: 50px; padding-right: 20px; color: black;">GEAR</h3> 
     <h5 style="padding-left: 50px; padding-right: 20px;">MEN'S GEAR</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Accessories</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">SPARQ</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Socks</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Bags & 
      Backpacks</h5> 
     <img class="ord1_img" 
      style="height: 20px; margin-left: 100px; width: 30px;" 
      src="img/plus.png" /> 
     <hr> 
    </div> 
    <div id="ord4" 
     style="margin-top: 20px; margin-left: 10px; float: left; width: 20%; height: 200px; background-color: #ffffff;"> 
     <h3 style="padding-left: 50px; padding-right: 20px; color: black;">Others</h3> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Clearence</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">ASDF</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">NFL</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Sportswear</h5> 
     <h5 style="padding-left: 50px; padding-right: 20px;">Soccer</h5> 
     <img class="ord1_img" 
      style="height: 20px; margin-left: 100px; width: 30px;" 
      src="img/plus.png" /> 
     <hr> 
    </div> 
</div> 

Answer 1

您可以在jQuery的動畫功能的使用，

檢查this鏈接，可以幫助您

Answer 2

檢查這些鏈接可以幫助你解決你的問題：

Relatively Simple 3 Equal-Height Columns CSS Liquid Layout

3 columns fluid layout

Example of 3 columns layout

3 columns layout via DIVs (middle-flexible, all flexible height, STRICT mode)