0

所以我有一张地图，悬停在某个点上，地址就会出现。但我更愿意将不透明度再保持 5 秒，以便用户可以复制该气泡中的文本。我有一个我现在在这里的例子。如果可能的话，我宁愿只使用 javascript 来做到这一点。

#harta {
width:958px;
height:465px;
background:url(https://mail-attachment.googleusercontent.com/attachment/u/0/?ui=2&ik=9315d35c80&view=att&th=13c903efbb6093fa&attid=0.1&disp=inline&realattid=f_hclsb8jy0&safe=1&zw&saduie=AG9B_P9aYbjGhKjTXzh9nfNdKFkW&sadet=1359636669888&sads=BF04ljTz2X-4v_L8ApM49KM_Bgo);
margin:0 auto;
position:relative;
}

.town {
position:absolute;
width:25px;
height:30px;
display:block;
cursor:pointer;
}

#point1 {
top:85px;
left:435px;
}

#point2 {
top:107px;
left:415px;
}

#point3 {
top:117px;
left:387px;
}

#point4 {
top:137px;
left:410px;
}

#point5 {
top:212px;
left:491px;
}

#point6 {
top:432px;
left:490px;
}

.info {
background:white;
position:absolute;
border-radius:5px;
padding:10px;
opacity:0;
display:inline-block;
min-width:250px;
}

#point1:hover+ #info_point1 {
top:55px;
left:460px;
opacity:1;
}

#point2:hover+ #info_point2 {
top:77px;
left:440px;
opacity:1;
}

#point3:hover+ #info_point3 {
top:87px;
left:412px;
opacity:1;
}

#point4:hover+ #info_point4 {
top:107px;
left:435px;
opacity:1;
}

#point5:hover+ #info_point5 {
top:182px;
left:516px;
opacity:1;
}

#point6:hover+ #info_point6 {
top:402px;
left:515px;
opacity:1;
}
4

2 回答 2

1

这里有一个小技巧。我找不到如何运行 5 秒的功能，所以我更改了要在 5 秒后恢复的功能。

$("#point1").on("mouseleave", function(){
    $("#point1").css("opacity", "1");
    setTimeout(function(){
        console.log("called");
        $("#point1").css("opacity", "0.3");
    }, 5000);
});

工作小提琴

于 2013-01-31T13:26:44.943 回答
0

获得它的最佳方法是为悬停添加过渡延迟：

#point1:hover + info{transition:all 0s 5s;-webkit-transition:all 0s 5s;-o-transition:all 0s 5s;}
于 2013-03-12T12:27:53.947 回答