Question

在我的JS文件中，我使用Jquery在地图上显示弹出窗口。但是，如果弹出窗口没有图片，那么当您将鼠标悬停在图片上时，上边距就会变得像弹出图片一样。这是我的截图I direct on area without picture，经过两次方向脚本工作正常。这是为什么？这是我的code。感谢。

$(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();
});
});

Answer 1

为什么你没有使用: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/

带有区域标签和弹出窗口的Jquery

1 个答案: