Непоследовательное поведение в jQuery в зависимости от браузера

Question

У меня есть JQuery:

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

    });

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

    });

И образец HTML:

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

Вышеуказанное работает в Firefox и IE, но не в Safari и Chrome. Есть идеи?

Спасибо.

EDIT:

Если я изменю js на:

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

    });

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

    });

Это будет работать, однако, конечно, показывая все b-расширения, а не только под родительским. Таким образом, проблема с находкой?

Нет свойств css, которые не показывают его. Также нет ошибок JS.

Answer 1

Я только что проверил это в IE 8, FF 3.66, chrome 5.0.375 ... и Safari 4. Это работает.

у вас, вероятно, есть какой-то сценарий где-то еще на странице, где отсутствует a; где-то на странице.

отсутствует; и такие не всегда отображаются как ошибки скрипта.

Вы также можете пропустить html или similer, который портит структуру страницы.

Answer 2

Что вы, вероятно, хотите, это:

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