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

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

1 个答案: