jQuery .hoverが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スタイルにホバー上の2つの要素を変更しています

私はmouseenter.addClassとmouseleave .removeClassのことを試しましたが、それはまったく動作しませんでした。私はこれをfirefoxで動作させると私は...そして、私はあなたがそれがでアクションに住んで見ることができます

...クロスブラウザのチェックを行なったし、私は再び悲しいましLL幸せ： http://roboticmonsters.com/who

Answer 1

Chromeの開発ツールを使用すると、javascriptの各機能の最後に無効なトークンがあると表示されます。 IEの開発ツールも無効なトークンを表示しますが、これを無視して正しく表示されるようです。可能であれば、ソースを確認してトークンを削除してください。

IE：

クローム：

Answer 2

の$の.cssはオブジェクトを取ります。

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

中括弧とコロン（カンマではありません）に注意してください。

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

あなたはがにCSSルールの値を取得している場合は、単なる文字列として名を渡す：

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

これは、あなたが一つにいくつかのCSSルールを指定することができそうです

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をクリックします。

更新：あなたはDOMがロードされる前に、これらのイベントにバインドしようとしているので、それはおそらくだ@のanothershuberyの答え

Answer 4

に示すように、あなたが不正な文字を削除した場合、実際にあなたのコードが正常に動作します。

なぜそれが壊れていたのかという答えをあなたに与える時間はありませんでしたが、クロームでは以下のことができます。

$(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', '');  
       } 
      ); 
});