Question

我写了下面的代码。这样当我的鼠标悬停到imgforplaces_thumbnail时。 div checkbutton将显示并叠加在div testtest上。但是，div checkbutton只会出现1-2秒，然后消失。如果我删除位置：绝对;在div testtest中的css中，div checkbutton会显示在其下方。

谁能告诉我为什么它只能工作1-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");
 });

});

Answer 1

您还可以尝试设置淡入和淡出的特定时间跨度值，而不是使用硬编码的慢速和快速属性像这样

$(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();
});
 });

});

有关详细信息，请参阅the documentation

Answer 2

你可以用CSS做到这一点，这总是比用JavaScript做这种事情更好。

.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;
}

上面我们在.imgforplaces_thumbnail1元素上使用CSS ：hover 伪类，然后当鼠标悬停在父元素上时，我们正在影响.checkbutton的不透明度。

更深入研究：hover伪类阅读：this blog post

这将产生相同的效果，因为当您将鼠标悬停在imageforplaces_thumbnail1上时，它会使不透明度变为1，转换为200毫秒

以下是一个jsFiddle，它将向您展示如何使用CSS和HTML：click here

Answer 3

我想我知道问题出在哪里：

“testtest”和“checkbutton”都必须放置位置：绝对;

解决了我的问题。感谢大家的宝贵意见！

jquery hover fadein只能在短时间内工作！为什么？

3 个答案: