Question

I am currently trying to make some jQuery hover effects render correctly in all browsers. For the moment, firefox, IE, opera all do what they are supposed to. However, Safari and Chrome do not.

The code looks like this:

<div id="button1">
    <div id="work_title" class="title_james">
    WORDS
</div>
</div>
<div id="button2">
    <div id="work_title" class="title_mike">
    MORE WORDS
</div>
</div>

and the script effecting it looks like this

<script>
$(function() {
$("#button2").hover(
function() {
    $("#james").css('z-index', '100')
    $(".title_mike").css('width', '590px')
}, function() {
    $("#james").css('z-index', '')
    $(".title_mike").css('width', '')
});
});​
$(function() {
$("#button1").hover(
function() {
    $(".title_james").css('width', '785px')
}, function() {
    $(".title_james").css('width', '')
});
});​
</script>

what I am trying to get it to do is change the css styles two elements on hover over two large areas of text..

I have tried the mouseenter .addClass and mouseleave .removeClass thing and that didn’t work at all.. so when I got this to work in firefox I was all happy… then I did cross browser checking and I got sad again..

You can see it live in action at:
http://roboticmonsters.com/who

Answer 1

Using the dev tools in Chrome it says there is an invalid token at the end of each of the javascript functions. The IE dev tools shows an invalid token too, but it seems to ignore this and render correctly. Check your source and remove the token, if you can.

IE:

Chrome: