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

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