Question

在我的网站上，我有一个带图像的菜单栏。我想在用户悬停在该菜单项上时替换图像。这是我的菜单：

 <ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a class="pressed" href="#" style="width:98px;"><img src="images/home.png" alt=""/>Home</a></li>
    <li class="topmenu"><a href="#" style="width:98px;">&nbsp;</a></li>
    <li class="topmenu"><a href="#" style="width:98px;"><img src="images/home.png" alt=""/>Work</a></li>
    <li class="topmenu"><a href="#" style="width:98px;">&nbsp;</a></li>
    <li class="topmenu"><a href="#" style="width:98px;"><img src="images/home.png" alt=""/>Team</a></li>
    <li class="topmenu"><a href="#" style="width:98px;">&nbsp;</a></li>
    <li class="topmenu"><a href="#" style="width:98px;"><img src="images/home.png" alt=""/>Blog</a></li>
    <li class="topmenu"><a href="#" style="width:98px;">&nbsp;</a></li>
    <li class="topmenu"><a href="#" style="width:98px;"><img src="images/home.png" alt=""/>Reach Us</a></li>    
</ul>

现在我要替换用户已悬停的菜单的图像。为此我使用jQuery。我这样做但我无法继续。

$('#css3menu1').find('li').hover(function()
                    {

                    }
                );

还是有其他办法，以便我可以替换图像吗？

Answer 1

假设您的每个li元素中都包含img元素。

(function () {
    /*Wrap inside anonymous function to prevent conflicts with global variables*/
    var orgSrc, // original source of image
        $element; // the image

    $("#css3menu1").find("li").hover(function () {
        $element = $(this).find("img");
        orgSrc = $element.prop("src");
        $element.prop("src", "http://placehold.it/200x200");
    }, function () {
        $element.prop("src", orgSrc);
    });
})();

Live Demo

Answer 2

始终建议您将演示文稿和行为远离HTML

除非您正在寻找动画，否则可以使用CSS background-image完成效果。

 <ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a id="home" class="pressed"href="#">Home</a></li>
    <li><a href="#" id="work">Work</a></li>
    <li><a href="#" id="team">Team</a></li>
    <li><a href="#" id="blog">Blog</a></li>
    <li><a href="#" id="reachus">Reach Us</a></li>    
</ul>

#css3menu1 li{
    width:98px;
}

#css3menu1 li a{
    display:block; /* add the width and height you need */
}

#home{ background: transparent url(img/home.png) no-repeat left top; }
#home:hover{ background: transparent url(img/home-hover.png) no-repeat left top; }

#work{ background: transparent url(img/work.png) no-repeat left top; }
#work:hover{ background: transparent url(img/work-hover.png) no-repeat left top; }

Answer 3

$('#css3menu1').find('li').hover(function()
                    {
                          $(this).first('img').attr('src', {hover over image source});
                    },
                    function()
                    {
                          $(this).first('img').attr('src', {hover out image source});
                    }
                );

Answer 4

尝试

Fiddle Demo

$('#css3menu1').find('li:has(img)').hover(function () { //attach hover if li has img
    var $this = $(this).find('img'); //cache selector
    $this.data('src',$this.prop('src'));//set old src to data 
    $this.prop('src', 'http://placehold.it/200x200'); // change img
}, function () {
    var $this = $(this).find('img'); //cache selector
    $this.prop('src', $this.data('src')); //get old image back
});

Answer 5

首先，您的HTML代码可以写得很好。

<强> HTML

<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a class="pressed" href="#"><img src="images/home.png" alt=""/>Home</a></li>
    <li class="topmenu"><a href="#"><img src="images/home.png" alt=""/>Work</a></li>
    <li class="topmenu"><a href="#"><img src="images/home.png" alt=""/>Team</a></li>
    <li class="topmenu"><a href="#"><img src="images/home.png" alt=""/>Blog</a></li>
    <li class="topmenu"><a href="#"><img src="images/home.png" alt=""/>Reach Us</a></li>    
</ul>

<强> CSS

li {
    margin-right: 98px;
}
li:last-child {
    margin-right: 0;
}
li a {
    width:98px;
}

<强> JS

@Gaurang Tandon的答案将是最佳选择

如何在菜单上悬停时替换图像

5 个答案:

Live Demo