1

4 つの div があり、それぞれにテキストが表示されます。画像用の div もあります。4 つの画像があります。対応する div にカーソルを合わせると、対応する画像が表示されるようにします。そのため、サルに関する div にカーソルを合わせると、画像 div に monkey.jpg が表示され、ライオン div にカーソルを合わせると、lion.jpg が表示され、サルの画像が消えるはずです。私はjqueryの経験があまりないので、あまり理解していません。

HTML:

<div class="images">
<img src="monkey.jpg">
<img src="lion.jpg">
<img src="tree.jpg">
<img src="falcon.jpg">
</div>

<div>
<p>Monkey are funny!</p>
</div>
<div>
<p>Lions are cool!</p>
</div>
<div>    
<p>Trees are green!</p>
</div>
<div>
<p>Falcons are fast!<p>
</div>

すべての画像を非表示にする関数を作成し、div にカーソルを合わせると各画像を個別に表示することを考えましたが、うまくいかないと思います。

4

5 に答える 5

1

そのように使用することもできます DEMO http://jsfiddle.net/yeyene/J8FJq/1/

リンクする画像の URL を含む target 属性を追加し、クラスも追加します。以下のスクリプトは、すべての変更を行います。

$('.imgLink').hover(function(){
    $('#preview').css({'background':'url('+ $(this).attr('target') +')'});
},function(){
    $('#preview').css({'background':''});
});
于 2013-07-16T05:03:36.333 に答える
0

あなたは.hoverjqueryを使うことができます

デモhttp://jsfiddle.net/kevinPHPkevin/J8FJq/

$('#monkeys').hover(function(){
    $('#preview').addClass('monkeys');
},function(){
    $('#preview').removeClass('monkeys');
});
于 2013-07-15T20:42:51.397 に答える
0

jquery と css を使用します。

CSS:

//image div { background-image: url('your-image.jpg'); width: // 画像の幅; height: // 画像の高さ; }

Jクエリ:

$('.another-element').hover(function(){
    $('div').css({    'background-image': 'url('newimage.jpg')',
    'width': '// new image width',
    'height': '// new image height;'})
});
于 2013-07-15T20:36:09.017 に答える
0

これは、目的の効果の完全な実装です。リンクのグループ化は、どの項目がホバーされているかを識別する役割を果たします (「 」を参照)、およびラッパー.index()のクラスに一致する画像のみを表示する CSS スタイルに注意してください。.imagesホバー関数は、名前の順序付けられたリストから描画して、ホバーされたアイテムを反映するようにそのクラスを設定します["monkey", "lion", ...]。

<div class="images">
    <img src="monkey.jpg">
    <img src="lion.jpg">
    <img src="tree.jpg">
    <img src="falcon.jpg">
</div>

<div class="links">
    <div>
        <p>Monkey are funny!</p>
    </div>
    <div>
        <p>Lions are cool!</p>
    </div>
    <div>    
        <p>Trees are green!</p>
    </div>
    <div>
        <p>Falcons are fast!<p>
    </div>
</div>

<style>
    .images img {
        display: none;
    }
    .images.monkey img[src*=monkey] {
        display: block;
    }
    .images.tree img[src*=tree] {
        display: block;
    }
    .images.lion img[src*=lion] {
        display: block;
    }
    .images.falcon img[src*=falcon] {
        display: block;
    }
</style>

<script>
    var images = ["monkey", "lion", "tree", "falcon"];
    $(".links div p").hover(function() {
        $(".images").attr("class", "images "+images[$(this).parents("div").index()]);
    }, function() {
        $(".images").attr("class", "images");
    });
</script>
于 2013-07-15T20:36:16.443 に答える