Inconsistent behaviour in jQuery depending on browser

Question

I have my jquery:

$('.category-block').mouseover(
        function (e) {
            $(this).find('.b-expand').show();

    });

        $('.category-block').mouseout(
        function (e) {
            $(this).find('.b-expand').hide();

    });

And sample html:

<div class="category-block" id="category-1">
        <a href="#">Mod</a>
        <div class="b-expand" id="block-expand-1">
         TEST
        </div>
    </div>

The above appears to work in Firefox and IE but not Safari and Chrome. Any ideas?

Thanks.

EDIT:

If I change the js to:

$('.category-block').mouseover(
        function (e) {
            $('.b-expand').show();

    });

        $('.category-block').mouseout(
        function (e) {
            $('.b-expand').hide();

    });

It will work, however of course showing all the b-expand's not just the one under the parent. Thus t he problem is with the find?

There are no css properties which dont show it. Also there are no js errors thrown.

Answer 1

What you probably want is this:

$('.category-block').hover(function() {
    $(this).find('.b-expand').show();
}, function() {
    $(this).find('.b-expand').hide();
});

Answer 2

I just tested it in IE 8, FF 3.66, chrome 5.0.375..., and safari 4. it works.

you probably have some script somewhere else on the page missing a ; somewhere on the page.

missing ; and such don't always show up as script errors.

you could also be missing a or similer html that is messing with the page structure.