1

以下のコードを書きました。マウスをホバーすると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");
 });

});
4

3 に答える 3

0

JavaScript でこの種のことを行うよりも常に優れている CSS でこれを行うことができます。

.checkbutton {
    height: 40px;
    width: 209px;
    z-index: 2000;
    margin: 0 auto;

    /*
     * Note that I have added a transition and opacity
     */
    transition:200ms;
    opacity:0;
}

.imgforplaces_thumbnail1:hover .checkbutton{
    opacity:1;
}

上記では、CSS : hover 疑似クラスを .imgforplaces_thumbnail1 要素で使用しており、親要素の上にホバーがあるときに .checkbutton の不透明度に影響を与えています。

:hover 疑似クラスの詳細については、次のブログ記事を参照してください。

imageforplaces_thumbnail1 にカーソルを合わせると、200 ミリ秒の遷移で不透明度が 1 になるため、これは同じ望ましい効果をもたらします。

CSS と HTML だけでこれがどのように機能するかを示す jsFiddle を次に示します

于 2013-07-11T08:27:12.470 に答える
0

このようにハードコーディングされた遅い属性と速い属性を使用する代わりに、フェードインとフェードアウトに特定の時間範囲の値を設定することもできます

$(document).ready(function(){
$(".checkbutton").hide();
$(".imgforplaces_thumbnail1").hover(function(){
$(".checkbutton", this).fadeIn(200,function(){


  //you can do something here
$("#yourimage").show();
      });
    },
    function(){
        $(".checkbutton", this).fadeOut(200,function(){
$("#yourimage").show();
});
 });

});

詳細については、ドキュメントを参照してください

于 2013-07-11T08:17:26.597 に答える