完成将鼠标悬停在文本链接到更改图像

Question

当用户将鼠标悬停在我一直在这里查看的文本链接上并基于它的 jQuery 代码但需要帮助使其正常工作时，我试图让图像显示在另一个图像之上 hover on text link to change image

我也试过让它在这里工作 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

Answer 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 以确保这不是问题。