javascript - 在另一个元素上释放悬停后，我如何保持 opacity=1 5 秒以上？

Question

所以我有一张 map ，将鼠标悬停在某个点上，就会出现地址。但我更愿意将不透明度再保持 5 秒，以便用户可以复制该气泡中的文本。我有一个我现在拥有的例子here .如果可能的话，我更愿意只使用 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;
}

Answer 1

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

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

工作 fiddle