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

当用户将鼠标悬停在我一直在这里查看的文本链接上时，我试图让一个图像显示在另一个图像的顶部，并基于该图像创建jQuery代码，但需要帮助才能使其正常工作

我也试着让它在这里工作

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
});

    
    
});

jQuery（函数（）{
var$catslider=jQuery（'#catslider'）；//保存滑块
var$defaultimage=jQuery（'img'，$catslider）；//和默认图像
//链接的鼠标指针
jQuery（'#projects.hoverlink'）.hover（函数（）{
函数完成（）{
jQuery（“#滑块”）；
}
var filename=jQuery（this）.attr（'data-img'）；//我们从data-img获取文件名
jQuery（“”）
.appendTo（$catslider）.fadeIn（500）；//在新图像中追加和淡入（#hoverimage）
$defaultimage.fadeOut（500）；//淡出默认图像
},
//鼠标删除链接
函数（）{
jQuery（'#hoverimage'）.fadeOut（500，函数（）{//fade out#hoverimage
$（this）.remove（）；//动画完成后，将其删除
});
$defaultimage.fadeIn（500）；//同时淡入原始图像
});
});

---

非常感谢您的帮助：D

我不能100%确定您想做什么，但请尝试一下此代码。此示例将在用户第一次悬停缓存图像时添加图像，然后在每次悬停之后显示隐藏图像

工作示例：

jQuery（函数（）{
$（“#box1”）。委托（“a”，“悬停”，函数（事件）{
var$img=$（this.parent（“li”）.find（“img”）；
var image=$（this.attr（'data-img'）；
如果（event.type==='mouseenter'）{
如果（$img.lenght）{
$img.show（）；
}否则{
$（本）。母公司（“li”）。追加（“”）；
}
}否则{
如果（$img）{
$img.hide（）；
} 
}
});
});​

---

注意：如果你的悬停图像移动链接位置，你会得到一个疯狂的闪烁效果。您需要添加一些css以确保这不是一个问题。

我不是100%确定您要做什么，但请尝试此代码。此示例将在用户第一次悬停缓存图像时添加图像，然后在每次悬停之后显示隐藏图像

工作示例：

jQuery（函数（）{
$（“#box1”）。委托（“a”，“悬停”，函数（事件）{
var$img=$（this.parent（“li”）.find（“img”）；
var image=$（this.attr（'data-img'）；
如果（event.type==='mouseenter'）{
如果（$img.lenght）{
$img.show（）；
}否则{
$（本）。母公司（“li”）。追加（“”）；
}
}否则{
如果（$img）{
$img.hide（）；
} 
}
});
});​

---

注意：如果你的悬停图像移动链接位置，你会得到一个疯狂的闪烁效果。你需要添加一些css来确保这不是一个问题。

是的，就是这样，非常感谢：D现在我只需要添加一些css，使图像显示在我想要的地方，然后确定，所以我在wordpress站点和JSFIDLE中都有相同的代码，但在wordpress中似乎不起作用。css会弄乱吗如果你不介意的话，你可以看看这里或这里，只留下必要的，甚至是默认的主题，但仍然没有运气，更不用说修复了，它正在尝试一切，似乎wordpress不喜欢任何$，所以我不得不用jQuery替换它们wordpress附带的jQuery版本会自动调用jQuery.noConflict（）；函数，它将$variable的控制权返回给最先实现它的库。如果希望在WordPress中安全地使用$variable，请在调用jQuery ready（）函数时安全地执行此操作。jQuery（函数（$）{/*您可以在这个代码块中安全地使用$来引用jQuery*/}）；是的，这就是了，非常感谢：D现在我只需要添加一些css，使图像显示在我想要的地方，然后确定，所以我在wordpress站点和JSFIDLE中都有相同的代码，但在wordpress中似乎不起作用。如果你不介意的话，css会影响效果吗只有必要的，甚至是默认的主题，但仍然没有运气，更不用说修复了，它正在尝试所有东西，似乎wordpress不喜欢任何美元，所以我不得不用jQueryWordPress附带的jQuery版本自动调用jQuer

<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>