jQuery. не работает в Safari или Chrome

Question

В настоящее время я пытаюсь корректно отображать некоторые эффекты наведения jQuery во всех браузерах. На данный момент Firefox, IE, Opera все делают то, что они должны. Однако Safari и Chrome этого не делают.

Код выглядит так:

<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>

и скрипт, выполняющий его, выглядит так

<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>

Я пытаюсь заставить его изменить стили CSS на два элемента при наведении курсора на две большие области текста.

Я попробовал mouseenter .addClass и mouseleave .removeClass, и это не сработало вообще ... поэтому, когда я заставил это работать в Firefox, я был полностью счастлив ... тогда я сделал перекрестную проверку браузера и получил снова грустно ..

Вы можете увидеть его в действии по адресу: http://roboticmonsters.com/who

Answer 1

Используя инструменты разработчика в Chrome, он говорит, что в конце каждой из функций javascript есть недопустимый токен. Инструменты разработчика IE также показывают недопустимый токен, но, похоже, игнорируют это и правильно отображают. Проверьте свой источник и удалите токен, если можете.

IE:

Chrome:

Answer 2

Возможно, это связано с тем, что вы пытаетесь связать эти события до загрузки DOM.

У меня не было много времени, чтобы дать вам ответ, почему он сломался, но следующее работает для меня в Chrome

    $(document).ready(function() {
    $("#button2").hover(function() {
                $("#james").css('z-index', '100');
                $(".title_mike").css('width', '590px');
                },
                function() {
                $("#james").css('z-index', '');
                $(".title_mike").css('width', '');      
                }
            );
    $("#button1").hover(function() {
                $(".title_james").css('width', '785px');
                },
                function() {
                $(".title_james").css('width', '');     
                }
            );
});

Answer 3

, если просто использовать код ниже, он работает нормально:

$("#button2").hover(
function() {
    $("#james").css('z-index', '100')
    $(".title_mike").css('width', '590px')
}, function() {
    $("#james").css('z-index', '')
    $(".title_mike").css('width', '')
});

В противном случае Chrome сообщает: Unexpected token ILLEGAL.Чтобы увидеть это самостоятельно, щелкните правой кнопкой мыши на странице и выберите inspect element.Нажмите маленький красный x в правом нижнем углу.

Обновление : на самом деле ваш код работает нормально, если вы удалите недопустимый символ, как показано в ответе @ anothershubery

Answer 4

$. Css берет объект:

$("#james").css({'z-index': '100'});

Обратите внимание на фигурные скобки и двоеточие (не запятая).

Это позволяет указать несколько правил CSS в одном:

$("#james").css({'z-index': '100', 'height': '100px'});

Если вы получаете значение правила CSS, просто передайте имя в виде строки:

$("#james").css('z-index'); // returns 100