2015-04-16 2 views
0

В моем JS-файле я использую JQuery для отображения всплывающего окна на карте. Однако, если всплывающее окно не имеет изображения, тогда, когда вы наводите на него курсор, верхний край становится таким, как если бы всплывающее окно имело изображение. Вот мой скриншот I direct on area without picture и после двухструнного скрипта работает нормально. Почему это? Вот мой code. Благодарю.JQuery с тегом области и всплывающим окном

$(document).ready(function(){ 
var plashka = $('.plashka'); 
var img = $('.plashka img'); 
var area = $('area'); 
plashka.hide(); 
area.on('mouseover', function (e) { 
    $('#plashka_name').html('<strong>Название: </strong>' + $(this).data('name')); 
    $('#plashka_category').html('<strong>Категория: </strong>' + $(this).data('type')); 
    if($(this).data('link')) { 
     $('.plashka a').attr({"href":$(this).data('link')}).html('Узнать подробнее'); 
    } else { 
     $('.plashka a').html(''); 
    } 
    if($(this).data('image')) { 
     img.attr({'src':$(this).data('image')}); 
     plashka.show(); 
    } else { 
    img.attr({'src':''}); 
    } 
    setTimeout(function(){plashka.show();},150); 
    var pw = plashka .outerWidth(true); 
    var ph = plashka .outerHeight(true); 
    var coords = $(this).attr('coords').split(','); 
    var left = parseInt(coords[0])-pw/1.08; 
    var top = parseInt(coords[1])-ph/1.08; 
    plashka.css({'left': left, 'top':top}); 
}); 

area.on('mouseout', function (e) { 
     plashka.hide(); 
}); 
plashka.on('mouseover', function(e){ 
    plashka.show(); 
}); 
$('.map_floor').on('mouseout', function(){ 
    plashka.hide(); 
}); 
}); 
+0

Вы можете захотеть изменить язык ваших скриншотов и добавить CSS в вашей скрипке. –

+0

И есть другой способ, по которому вы можете размещать ссылки в своем вопросе. Вы можете попробовать щелкнуть по символу ссылки. –

+0

Я добавляю ссылку с частью моего кода. здесь скриншот после дважды направления [в два раза] (http://take.ms/kjRPn) –

ответ

0

Почему вы не используете :hover?

<div class="wrapper"> 
    <div class="example"> 
     <div class="plashka"> 
      <strong>Название: </strong> 
     </div> 
     test</div> 
</div> 

.wrapper { 
    padding:100px; 
} 

.example { 
    background:blue; 
} 

.plashka { 
    position:absolute; 
    background:red; 
    margin-left:-60px; 
    margin-top:-10px; 
    display:none;  
} 
.example:hover .plashka{ 
    display:block; 
} 

http://jsfiddle.net/vbb7v2wr/

+0

Оставить комментарий в разделе div.plaska изменений зависит от области. Извините, я по-иностранному добавляю стиль. [там с css и изображением] (http://jsfiddle.net/n8m6jav6/14/). Как видите, изменения полей зависят от области зависания. –

+0

Вы можете создать другую плашку для каждого местоположения? – Soronbe