Simple jQuery function works in every browser but Firefox. What am I missing?

Question

$(document).ready(function() {
    $("span.link").mouseover(function(e){
        $(this.children).css("display","inline");  
      });
  });

I'm not a javascript expert, but I've cobbled together a few functions using jQuery.

In this case, the stylesheet hides some controls. When the user mouses over, this function exposes those controls.

This works on every browser but Firefox (on the Mac and Windows). Am I missing something obvious?

Thanks for your help,

Jason

Answer 1

Try it like this:

$(function() {
    $("span.link").mouseover(function(e){
        $(this).children().css("display","inline");  
    });
});

Answer 2

Outstanding. That worked. Thank you so much,

Jason

p.s., I guess I should use Firefox as my browser when developing, if Safari is more forgiving...

Answer 3

Actually, what you need to use when developing a web application are:

• FireFox
• IE
• Safari
• (Chrome soon...)

And what I mean is that you should test every step of your website on all 3 major Grade-A browsers...so if something doesn't work in the process, you will know exactly what caused the break.

If you don't check regularly with the browsers on how your page is turning out, it will be a lot harder to fix problems later on.

Answer 4

To add on to what Dreas said, if you happen to be developing for a client that gets a fair amount of traffic (I would say do it in any case) do yourself a favor and find a way to test it in IE6 as well. You will save yourself a bunch of headaches in the future if you do. A good third of my week last week was figuring out why this or that didn't work in IE (both 6 and 7), including my entire day Friday. Luckily I was still in the development phase and didn't have the client coming back fuming mad a week later wondering why his/her users were having problems in IE6 (which has also happened before).

Thankfully a colleague clued me into Microsoft Virtual PC so now I can test in whatever I need to before I say something is done.

Answer 5

Check out this app which installs multiple versions of Internet Explorer

...ranging from v3, v4, v5 and most importantly, v6 (you should include tests in ie6 when developing)

Answer 6

use addClass.....easier to work with especially if you wish to add multiple styles at a later date. Just a good habit to get into.

$(function() {
    $("span.link").mouseover(function(e){
        $(this).children().addClass('inlineClass');  
    });
});