Jquery hover help

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

?>

---

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();
    });
});

---

Inside the hover function you need to find the descendant of the current element, which you do like this:

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

this is the current element (the hovered .row element), so $(this) creates a jQuery object out of that so you can call jQuery methods on it.

---

$('.row').hover(function(event) {
    if (this == event.currentTarget) {
        // run code here
    }

---

Working example at: http://jsfiddle.net/theom3ga/yPCCn/

You just have to address the child block, using $(".block", $(this))

---

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

---

It is very hard for the user to perform mouseover on a hidden element (or an element that is very small).

Change your code to something like this:

$(function() {
    $('.block').hide(); // hide all .block elements
    $('.row').bind('mouseover', function() { // bind a mouseover handler
        $(this).find('.block').show();
    }).bind('mouseout', function () { // bind a mouseout handler
        $(this).find('.block').hide();
    });
});

---

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

hover makes few sense in this case, except if you want to close the block altogether. this method allows to keep the last row open if you wander far away with your mouse.

http://jsfiddle.net/7SQdu/1/

hoever, if you want to close the block each time your mouse leaves:

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

of course it implies something like .block {display: none;} in your css.

---

Why even use JavaScript? Why not just use CSS? (unless you really need to support IE 6 and below)

CSS:
.row .block { display: none; }
.row:hover .block { display: block; }

HTML:
<div class='row'><div class='block'>one</div></div>
<div class='row'><div class='block'>two</div></div>
<div class='row'><div class='block'>three</div></div>
<div class='row'><div class='block'>four</div></div>

Oh and as @Ben Everard stated, no need for echo