Just take style="position: absolute; left: 457px; top: 228px;"
over to description 2 and you are good to go.
Jquery position of hide div
Вопрос
I have some simple question.
Look at my code :
Discription div show when i mouse over on img
. but i want to display description div at the bottom of image not in top of map.
Решение 2
Другие советы
I've tried to cleaned up and changed your code a little, so the first of all, the marker is at the map, and the description that belongs to the marker is just below it.
Notice that I've created a description-container, which contain the point, and the description. Furthermore, I've changed a bit in the js.
http://jsfiddle.net/9RxLM/2465/
The code looks like this:
HTML
<div class='map'>
<div class='description-container' style="top: 200px; left: 200px;">
<div class="hoverable">
<img src="point.png" />
</div>
<div class='description'>
<h2>taaa</h2>
<p>descriiption</p>
</div>
</div>
</div>
CSS
.map{
background: url("http://webhelp.pl/pictures/zasoby/mapka_363.png");
width: 528px;
height: 495px;
background-repeat: no-repeat;
}
.description-container{
position: absolute;
top: 200px;
left: 200px;
}
.description {
display: none;
width: 300px;
padding: 10px;
background: #EEEFEB;
color: #000000;
border: 1px solid #4D4F53;
margin: 0px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
position: relative;
margin-left: -50%;
}
.description h2 {
background-color: #4D4F53;
color: #E3E5DD;
font-size: 14px;
display: block;
width: 100%;
margin: -10px 0px 8px -10px;
padding: 5px 10px;
}
JS
$(".description-container .hoverable").mouseover(function () {
$(this).parent(".description-container").find(".description").show();
}).mouseout(function () {
$(this).parent(".description-container").find(".description").hide();
});
Hope this will help you.
Make the description absolutely positioned with bottom: 0
.description {
display: none;
width: 400px;
padding: 10px;
background: #EEEFEB;
position: absolute;
bottom: 0;
color: #000000;
border: 1px solid #4D4F53;
margin: 0px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
}
Demo: Fiddle
Use like this
$(".description2").mouseover(function(e) {
$(this).children(".description").css("margin-left",e.pageX);
$(this).children(".description").css("margin-top",e.pageY);
$(this).children(".description").show();
}).mouseout(function() {
$(this).children(".description").hide();
})
Change your css like this
instead of marging : 0px use this margin-top: 375px;