1

ここで探しているテキストリンクにユーザーがカーソルを合わせ、それに基づいてjQueryコードを作成したときに、画像を他の画像の上に表示しようとしていますが、画像を 変更するには、テキストリンクにカーソルを合わせて画像を機能させる必要があります。

ここでも動作させてみました http://jsfiddle.net/edgardo400/pDTvu/

html

<div id="box1" class="box">
    <div style="height: 335px; width: 945px; border: 6px solid #d7c3a5;">
        <h1>
            Cat Poison Control
        </h1>
        <ul>
            <li style="list-style-position: outside; list-style-image: url('http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/35px-Black_Cat-icon.png');">
                <a class="hoverlink" href="http://www.catster.com/cat-health-care/cat-deshedding-tool" data-img="http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/desheddingtool493x335.jpg">
                    What Does a De-Shedding Tool Do?
                </a>
            </li>
            <li style="list-style-position: outside; list-style-image: url('http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/35px-Himalayan_Cat-icon.png');">
                <a href="http://www.catster.com/cat-health-care/cleaning-cat-ears">
                    Cleaning Cat Ears
                </a>
            </li>
            <li style="list-style-position: outside; list-style-image: url('http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/35px-Orange_Tabby-icon.png');">
                <a href="http://www.catster.com/cat-health-care/how-to-give-a-cat-a-bath">
                    How to Give a Cat a Bath (and Survive!)
                </a>
            </li>
            <li style="list-style-position: outside; list-style-image: url('http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/35px-White_Kitty-icon.png');">
                <a href="http://www.catster.com/cat-health-care/clipping-cat-claws">
                    How to Clip Your Cat's Nails
                </a>
            </li>
            <li style="list-style-position: outside; list-style-image: url('http://images2.wikia.nocookie.net/__cb20100110163009/farmville/images/thumb/b/bb/Black_Cat-icon.png/35px-Black_Cat-icon.png');">
                <a href="http://www.catster.com/cat-health-care/cat-grooming-tools">
                    The Five Essential Cat Grooming Tools
                </a>
            </li>
            <li style="list-style-position: outside; list-style-image: url('http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/40px-Andean_Cat-icon.png');">
                <a href="http://www.catster.com/cat-health-care/cat-grooming">
                    Cat Grooming: A Primer on Keeping Kitty Clean
                </a>
            </li>
        </ul>
        <div id="catslider">
             
            <img class="alignright size-full wp-image-34" style="position: relative;" title="aspca_poisoncontrol_hotline_feathered"
            src="http://anime.edgardoroldanonline.com/wp-content/uploads/2012/04/aspca_poisoncontrol_hotline_feathered.png" alt="aspca hotline"
            width="150" height="150" />
        </div>
        
    </div>
    <p>
        <button class="btn2">
            fade out
        </button>
    </p>
</div>

およびjQuery

jQuery(function(){
var $catslider=jQuery('#catslider'); //we save the slider
var $defaultimage=jQuery('img', $catslider); //and the default image

//mouseenter for the link
jQuery('#projects .hoverlink').hover(function () {

        function complete() {
          jQuery('#slider');
        }
  var filename=jQuery(this).attr('data-img'); //we get the filename from data-img

  jQuery('<img id="hoverimage" src="'+filename+'" alt="" />')
    .appendTo($catslider).fadeIn(500); //append and fade in new image (#hoverimage)

  $defaultimage.fadeOut(500); //fade out default image
},
//mouseleave for the link
function () {
  jQuery('#hoverimage').fadeOut(500, function () { //fade out #hoverimage
    $(this).remove(); //when animation is done, remove it
  });

  $defaultimage.fadeIn(500); //meanwhile fade in original image
});

    
    
});

私はすべての援助に感謝します：D

4

1 に答える 1

1

何をしようとしているのかは 100% わかりませんが、このコードを試してみてください。この例では、ユーザーが最初にホバーしてキャッシュしたときに画像を追加し、その後ホバーするたびに画像を非表示にします。

作業例: http://jsfiddle.net/leviputna/cQqGf/2/

<script>
jQuery(function(){
    $("#box1").delegate("a", "hover", function(event){
        var $img = $(this).parent("li").find('img');
        var image = $(this).attr('data-img');

        if( event.type === 'mouseenter' ) { 
            if($img.lenght){
                $img.show();
            }else{
                $(this).parent("li").append('<img id="theImg" src="' + image + '" />');
            }
        }else{
            if($img){
                $img.hide();
            } 
        }
    });
});​
</script>

注: ホバー イメージがリンクの位置を移動すると、クレイジーな点滅効果が得られます。これが問題ではないことを確認するには、いくつかの css を追加する必要があります。

于 2012-04-21T01:36:32.990 に答える