JQuery在悬停时显示Div

前端之家收集整理的这篇文章主要介绍了JQuery在悬停时显示Div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图找出当用户将鼠标悬停在内容块上时如何使用 JQuery显示一些工具.例如,块显示如下,最初隐藏的工具:
<div id="block_1">
    <div class="tools" style="display:none;">Tools Here</div>
</div>

<div id="block_2">
    <div class="tools" style="display:none;">Tools Here</div>
</div>

用户将鼠标悬停在block_1中的任何内容上时,我需要它来显示block_1的工具.

我看到你可以使用通配符来做类似的事情:

$("*[id^=block_]").hover(
    function () {
        // somehow toggle div.tools for this block
    },function () {
       // somehow toggle div.tools for this block
    }

我只是想不通你怎么能专门切换那个块的div.tools …

解决方法

做这个:
$("*[id^=block_]").hover(
    function() {
        // Styles to show the Box
        $(this).children('.tools').css(...);
    },function () {
        // Styles to hide the Box
        $(this).children('.tools').css(...);
    }
);

您可能想要考虑使用$.addClass()和$.removeClass(),因为它更容易管理.

原文链接:https://www.f2er.com/jquery/178916.html

猜你在找的jQuery相关文章