Question

The below code doesn’t work. I want when the mouse hovers over a div with the class=’row’ to display the child div. I’m used to JavaScript but i’m just now adjusting to jQuery. How do i accomplish this?

<script type="text/javascript">
$(function() {
$('.block').hide();
$('.row').hover(function() {
$('.block').show();

});

});
</script>
<?php

echo "<div class='row'><div class='block'>one</div></div>";
echo "<div class='row'><div class='block'>two</div></div>";
echo "<div class='row'><div class='block'>three</div></div>";
echo "<div class='row'><div class='block'>four</div></div>";

?>

Answer 1

You code will currently show all elements with class “block” when any element with class “row” is hovered. You need to select the correct .block element:

$(function() {
    $('.block').hide();
    $('.row').hover(function() {
        $(this).find('.block').show();
    });
});

This uses the .find method to find a descendant of the selected element that matches the selector .block.

I’m not sure what you intend to happen when the mouse leaves the .row element, but currently nothing will happen (in fact, the same .show line will run again, because that’s what happens when only a single argument is passed to .hover). If you intended the .block element to be hidden again, you can supply another argument to .hover:

$(function() {
    $('.block').hide();
    $('.row').hover(function() {
        $(this).find('.block').show();
    }, function() {
        $(this).find('.block').hide();
    });
});

Alternatively, you can stick with the single argument, and use the .toggle method instead:

$(function() {
    $('.block').hide();
    $('.row').hover(function() {
        $(this).find('.block').toggle();
    });
});