1

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

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

});
4

3 回答 3

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 回答
0

你可以用 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：单击此处

于 2013-07-11T08:27:12.470 回答
0

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

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

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

于 2013-07-11T22:58:34.833 回答