向下滑动的div与下部按钮合并，不是上部的

悬停的左上角按钮向下滑动，并带有示例说明。有两个问题我无法解决。向下滑动的div与下部按钮合并，不是上部的

说明必须与第二个按钮合并，但它与第一个按钮合并。
我无法控制预先

谢谢，按钮，描述之间的距离等。

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <script src = "jquery-2.0.1.js" type = "text/javascript"></script> 
     <script src = "jquery-ui-1.10.3/jquery-ui-1.10.3/ui/jquery-ui.js" type = "text/javascript"></script> 
     <script src = "script.js" type = "text/javascript"></script> 
    </head> 

    <body style = "background-color: black"> 

     <div id = "header" style = "width: 100%; text-align: center"> 
      <h1 style = "color: white">Header</h1> 
     </div> 


     <div id = "buttons" style = "float: left; width: 100%"> 

      <div id = "column_div1" style = "float: left; width: 33%"> 
       <div id = "button_div1" style = "width: 280px; margin: 0 auto"> 
        <img id = "text1" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" style = "width: 280px; height: 40px; margin: 0; border: 1px solid #DDD" /> 
       </div> 

       <div id = "button_div2" style = "width: 280px; margin: 0 auto"> 
        <img id = "text2" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" style = "width: 280px; height: 40px; margin: 0; border: 1px solid #DDD" /> 
       </div> 
      </div> 


      <div id = "column_div2" style = "float: left; width: 33%"> 
       <div id = "button_div3" style = "width: 280px; margin: 0 auto"> 

        <img id = "text3" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" style = "width: 280px; height: 40px; margin: 0; border: 1px solid #DDD" /> 
       </div> 

       <div id = "button_div4" style = "width: 280px; margin: 0 auto"> 

        <img id = "text4" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" style = "width: 280px; height: 40px; margin: 0; border: 1px solid #DDD" /> 
       </div> 
      </div> 


      <div id = "column_div3" style = "float: left; width: 33%"> 
       <div id = "button_div5" style = "width: 280px; margin: 0 auto"> 

        <img id = "text5" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" style = "width: 280px; height: 40px; margin: 0; border: 1px solid #DDD" /> 
       </div> 

       <div id = "button_div6" style = "width: 280px; margin: 0 auto"> 

        <img id = "text6" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" style = "width: 280px; height: 40px; margin: 0; border: 1px solid #DDD" /> 
       </div> 
      </div> 

     </div> 
    </body> 
</html>

的script.js

$(document).ready (function() { 

    $(document).on ("mouseenter", "#text1", function() { 
     $("#descr").remove(); 
     $("#button_div1").append ("<div style = 'background-color: white; width: 280px; height: 150px; margin: 0 auto; border: 1px solid #DDD' id = 'descr'></div>"); 
     $("#descr") 
      .hide() 
      .append ("<h3 style = 'float: left; height: 100px'>Sample description</h3>") 
      .slideDown ("slow"); 
    }); 


    $(document).on ("mouseleave", "#text1", function() { 
     $("#descr").slideUp ("slow", function() { 
       $(this).remove(); 
     }); 
    }); 


    $(document).on ("mouseenter", "#descr", function() { 
     $("#descr").slideUp ("slow", function() { 
       $(this).remove(); 
     }); 
    }); 

});

演示：http://jsfiddle.net/UVtyk/

来源

2013-06-24 Kudayar Pirimbaev

你真的应该独立于HTML的CSS。 – Don

在我试图实现的网站 - 是的，我使用CSS，急于询问时，没有分开 –

$("#button_div1").append ("<div style = 'background-color: white; width: 280px; height: 150px; margin: -5px auto 5px auto; border: 1px solid #DDD' id = 'descr'></div>");

来源

2013-06-24 13:52:16

向下滑动的div与下部按钮合并，不是上部的

回答

相关问题