5

うまくいけば、簡単な質問です:)

私はこれを行うのに役立つ小さなjQueryを書き込もうとしています：

  • ページに表示されるテキスト：CA
  • マウスをホバーしたときに表示されるテキスト：CALIFORNIA

残念ながら、これを間違った方法で行うことができました。.hide（）関数を使用する必要があることはわかっていますが、使用方法がわかりません。申し訳ありませんが、私はjQueryにかなり慣れていないので、頭を悩ませようとしています。

これが私がリンクを作ったjfiddleです、できればテキストは右からスライドインします。スパンを使用してみましたが、異なる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');
});

どうもありがとう！

4

2 に答える 2

7

あなたが持っていたコードはうまくいくでしょう、あなたはそれをよりセマンティックにするためにあなたの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');
});

ページにこれらが複数あると想定しているため、セレクターにコンテキストを追加したことに注意してください。

フィドルの例

于 2012-12-07T11:18:20.667 に答える
3

これを試して：

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

それが役に立てば幸い ：）

于 2012-12-07T11:08:17.073 に答える