Question

I’m trying to figure out how to use JQuery to display some tools when the user is hovering over a content block. For example, the blocks are displayed as follows with the tools initially hidden:

<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>

I need it to show the tools for block_1 when the user is hovering over anything in block_1.

I see that you can use wildcards to do something like:

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

I just can’t figure out how you can specifically toggle just the div.tools for that block…

Answer 1

Do this:

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

You may want to consider just using $.addClass() and $.removeClass(), as it would be much easier to manage.