0

我试图让一个按钮出现在悬停时并在鼠标离开对象时消失。有很多帖子，就像您可能在 Twitter 提要上找到的那样，但我只希望按钮出现在您悬停的帖子上，而不是所有帖子上。这是我的代码：

$(".posts").hover(function() {
    $(this).find("article .report-post").css('visibility', 'visible');
    $(this).find("article .report-post .report-btn").css('visibility', 'visible');
}, function () {   
    $(this).find("article .report-post").css('visibility', 'hidden');
    $(this).find("article .report-post .report-btn").css('visibility', 'hidden');
});

我究竟做错了什么？如果我这样做，什么都不会发生：

$("article").hover(function() {
    $(this).find(".report-post").css('visibility', 'visible');
    $(this).find(".report-post .report-btn").css('visibility', 'visible');
}, function () {   
    $(this).find(".report-post").css('visibility', 'hidden');
    $(this).find(".report-post .report-btn").css('visibility', 'hidden');
});

是不是因为<article>网页上有很多s？

编辑：这是其中一个的 HTML <article>：

<article class="single-post">
    <div class="profile-pic">
        <a href="tg">
        <div style="background-image:url(example.jpg);background-size:cover;width:70px;height:70px;"></div></a>
    </div><!-- profile-pic -->

    <div class="text">
        <h5 class="tg" id="CMfQ34erT6-author"><a href="tg" style="color:#2C3E50;">Tristram Gale</a></h5><a class="report-post" href="#" id="CMfQ34erT6" style="visibility: hidden;">
        <div class="report-btn" style="visibility: hidden;"></div></a>

        <p class="post-text">LALALALALALALALALALALA</p>

        <div class="details">
            <ul>
                <li style="text-overflow: ellipsis;width: 170px;white-space: nowrap;overflow: hidden;">
                    <a href="school.php?id=1">Devonport High School for Boys</a>
                </li>

                <li style="list-style: none; display: inline">
                    <a href="post.php?id=CMfQ34erT6">
                    <ul>
                        <li title="2013-07-02 21:16:57">about 15 hours ago</li>
                    </ul>

                    <ul class="comments" id="CMfQ34erT6">
                        <li>
                            <a href="javascript:void(0)">0 comments</a>
                        </li>
                    </ul></a>
                </li>
            </ul>
        </div>

        <div class="comments-box" id="CMfQ34erT6-box" style="display: none;">
            <div id="CMfQ34erT6-comment-box">
                <ul>
                    <li class="CMfQ34erT6-new-comment">
                        <form class="CMfQ34erT6-form" id="CMfQ34erT6" name="CMfQ34erT6">
                            <input autocomplete="off" id="newCommentText" placeholder="Write a comment..." type="text"><input id="addcomment" onclick="return postComment(this.form.id, this.form.newCommentText.value)" type="button" value="Post">
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div><!-- text -->

    <div class="clear"></div><!-- clear -->
</article>

谢谢

4

4 回答 4

1

好的，我已经在 jsfiddle 上对此进行了测试，但他们的服务器现在已关闭 - 请参阅http://www.isitdownrightnow.com/jsfiddle.net.html 在 HTML 中，将样式属性从更改visibility:hidden为display:nonefordiv以及a。

然后以下代码起作用：

$(".posts .single-post").hover(function() {
    $(this).find(".report-post").show();
    $(this).find(".report-btn").show();
}, function () {   
    $(this).find(".report-post").hide();
    $(this).find(".report-btn").hide();
});
于 2013-07-03T11:45:11.640 回答
1

如果您不打算hover()在 Javascript 中将这些函数用于其他用途，则可以完全在 CSS 中完成。

style="visibility: hidden;"从按钮和链接中删除属性并将其添加到您的 CSS：

article .report-post {
    visibility: hidden;
}
article:hover .report-post {
    visibility: visible;
}

仅当光标在文章上方时，该按钮才可见。

jsfiddle 再次上线：http: //jsfiddle.net/GeraldS/6MQv7/

于 2013-07-03T12:48:30.323 回答
0

用这个 ：-

 jQuery('.button').hover(function () {
        jQuery(this).addClass('button-hover');
    }, function () {
        jQuery(this).removeClass('button-hover');
    });

而不是按钮替换文章。

于 2013-07-03T11:31:22.393 回答
0

试试这些东西：

  1. 确保已将 hover() 函数放入 document.ready()
  2. .report-btn 类中没有文本。当所有内容都设置为可见时，请确保您可以看到该按钮。
  3. 不需要.find，让它变得简单......

例如，试试这个代码：

$(function() { 
$('article').hover(function() {
    $(".report-post").css('visibility', 'visible');
    $(".report-post .report-btn").css('visibility', 'visible');
}, function () {   
    $(".report-post").css('visibility', 'hidden');
    $(".report-post .report-btn").css('visibility', 'hidden');
});
});

如果它仍然不起作用，请尝试“display:none”和“display:block”而不是“visibility”

于 2013-07-03T11:46:03.187 回答