以下のコードを書きました。マウスをホバーするとimgforplaces_thumbnail
. divcheckbutton
が表示され、 div にオーバーレイされtesttest
ます。ただし、divcheckbutton
は 1 ~ 2 秒間だけ表示され、消えます。position:absolute; を削除した場合 css in divtesttest
では、その下に divcheckbutton
が表示されます。
1〜2秒しか機能しない理由を誰か教えてもらえますか?
2 つのdiv が.testtest
あり.checkbutton
、それらは .imgforplaces_thumbnail1 でラップされています。
これらはdivです:
echo '<div class=imgforplaces_thumbnail1 id=imgforplaces_thumbnail>';
echo '<div class=testtest>';
echo "<a class='ajax' href='image_color_box.php?id=".$row['id']."' title='Homer Defined'>";
echo "<img src='../imgforplaces_thumbnail/" . $row['location_name'] . ".png' />";
echo '</a>';
echo '</div>';
echo '<div class=checkbutton><img src="../images/fbloginbutton.png" /></div>';
echo '</div>';
css は次のとおりです。
#imgforplaces_thumbnail {
border: 10px solid #EEEEEE;
float: left;
margin: 20px;
outline: 1px solid #CFCFCF;
width: 300px;
height: 225px;
}
.checkbutton {
height: 40px;
width: 209px;
z-index: 2000;
margin: 0 auto;
}
.testtest {
position: absolute;
}
jquery ホバー機能:
$(document).ready(function(){
$(".checkbutton").hide();
$(".imgforplaces_thumbnail1").hover(function(){
$(".checkbutton", this).fadeIn("slow");
},
function(){
$(".checkbutton", this).fadeOut("slow");
});
});