Inconsistent behaviour in jQuery depending on browser
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开发者_JAVA百科>
<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.
What you probably want is this:
$('.category-block').hover(function() {
$(this).find('.b-expand').show();
}, function() {
$(this).find('.b-expand').hide();
});
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.
精彩评论