Javascript 在将鼠标悬停在另一个元素上后，如何使不透明度再保持15秒？

所以我有一张地图，悬停在某个点上，地址就会出现。但我更愿意将不透明度再保持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;
}

---

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

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

---

工作

获得此功能的最佳方法是在悬停中添加过渡延迟：

#point1:hover + info{transition:all 0s 5s;-webkit-transition:all 0s 5s;-o-transition:all 0s 5s;}

---

我建议考虑使用

hoverIntent

插件，该插件支持以下功能：