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 に答える