jQueryはテキストを隠し、ホバーに表示しますか？

Question

うまくいけば、ちょうど簡単な質問:)

私はこれを行うのに役立ちます少しjQueryの書き込みをしようとしています：ページに表示

• テキストを：マウスを置いたときに
• テキストが表示CA：カリフォルニア州

残念ながら、私はこのメソッドを使用する必要があることを知っていますが、使用方法はわかりません。申し訳ありませんが、jQueryを初めて使いこなしているだけです。

私はlinkを作ったのですが、テキストは右からスライドするのが望ましいです。私はスパンを使用しようとしましたが、異なるdivのpタグを持つ方がうまくいくように思えました。私は、CAとLIFORNIAの間の小さなスペースを取り除くためにHTMLをすべて1行に配置する必要があることを理解しています。誰でも助けてくれますか？

HTML：

<div class="state"> 
    <p>CA</p> 
</div> 
<div class="state-full"> 
    <p>LIFORNIA</p> 
</div> 

CSS：

.state, .state-full { 
    display: inline-block; 
    cursor: pointer; 
} 

のjQuery：

$('.state').hover(function() { 
    $('.state-full').slideToggle(100, 'linear'); 
    $('.state-full').display(100, 'linear'); 
}); 

多くの感謝！

Answer 1

、あなたはそれがよりセマンティック作るためにあなたのHTMLやCSSを少し変更する必要があります。私はあなたがページ上でこれらの複数を持っているつもりだと仮定して、私はセレクタにコンテキストを追加することを

<div class="state">  
    <span>CA</span> 
    <span class="state-full">LIFORNIA</span> 
</div> 

.state, .state-full { cursor: pointer; } 
.state-full { display: none; } 
.state span { float: left; } 

$('.state').hover(function() { 
    $('.state-full', this).slideToggle(100, 'linear').display(100, 'linear'); 
}); 

注：これを試してみてください。

Example fiddle

Answer 2

はこれを試してみてください：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.state').mouseenter(function() { 
      $(this).html("CALIFORNIA"); 
     }); 
     $('.state').mouseleave(function() { 
      $(this).html("CA"); 
     }); 
    }); 
</script> 

あなたが持っていたコードが正常に動作します、それがお役に立てば幸い:)