When hovering over the upper left button, a div with sample description slides down. However, I am facing two challenges that I cannot seem to resolve.
- The description is supposed to merge with the second button but instead merges with the first one.
- I am unable to control the spacing between buttons, descriptions, etc.
Any help or suggestions would be greatly appreciated.
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();
});
});
});