Слайд-вниз div сливается с нижней кнопкой, а не сверху

Верхняя левая кнопка при наведении спускает вниз 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

Вы действительно должны отделить CSS от HTML. – 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 сливается с нижней кнопкой, а не сверху

ответ

Смежные вопросы