Question

我有一个菜单，在每个项目的鼠标悬停事件中，加载到第二个div的图像应该更改，而onMouseout应该替换为原始内容。

此时我将原始内容保存到var并创建onMouseover＆amp;每个菜单项的onMouseOut事件。

Jquery的：

 $(document).ready(function(){
    var heroSwap= $('#swapspace').html();

    $('#menu1').mouseover(function(){
        $('#swapspace').html('<img src="img/1.JPG"></img>');

    });
    $('#menu1').mouseout(function(){

        $('#swapspace').html(heroSwap);

    });
    .... ..*ETC  There are 7 More of these identical except for id*.. ....

});

问题：

有没有办法创建一个可以处理菜单标签参数的通用函数？
是否更容易..而不是交换innerHTML img标签来创建由onMouseover / onMouseout事件显示/隐藏的隐藏div？

完整示例： Sample Site

Answer 1

最好将图像src存储在data-src属性中。这样您就不需要为每个图像使用多个变量。

然后您不需要更改html，只需更改src属性即可。

首先将li替换为使用class而不是id's

<强> HTML

<ul class="nav nav-stacked nav-pills">
    <li class="menu" data-src="img/1.JPG"> <a href="#">Web Development</a> </li>
    <li class="menu" data-src="img/2.JPG"> <a href="#">Software Development</a></li>
    <li class="menu" data-src="img/3.JPG"> <a href="#">System Support</a></li>
    <li class="menu" data-src="img/4.JPG"> <a href="#">SEO</a></li>
    <li class="menu" data-src="img/5.JPG"> <a href="#">Social Media Marketing</a> </li>
    <li class="menu" data-src="img/6.JPG"> <a href="#">Project Management</a></li>
</ul>

<强>的Javascript

$(document).ready(function () {
    var $swapImg = $('img', '#swapspace'),
        defaultImage = 'default.jpg';

    $('.menu').on({
        mouseover: function () {
            $swapImg.attr('src', $(this).data('src'));
        },
        mouseout: function () {
             $swapImg.attr('src', defaultImage);
        }
    })
});

这样，对于所有li's，您只有一个事件处理程序，而不是每个菜单项的单独处理程序。

Answer 2

您可以轻松创建通用功能。您可以在#menu1标记上添加一个属性，其中包含图片的网址和类名：

 <li class='menu' data-src='img/1.JPG'></li>

然后创建类似的函数：

$('.menu').mouseover(function(){
    $('#swapspace').html('<img src="'+$(this).data('src')+'"></img>');

});
$('.menu').mouseout(function(){

    $('#swapspace').html(heroSwap);

});

至于你的第二个问题，我只是交换你src的{{1}}而不是更改整个HTML。

img

Answer 3

使用css实际上更好。它也更容易。

背景可以是css，url，color等中的任何内容。

<div id="menu1" class="menu-item"><div class="img"></div></div>
<div id="menu2" class="menu-item"><div class="img"></div></div>

续

简单的js hover使用mouseenter和mouseleave http://api.jquery.com/hover/

$(function() {

    $(".menu-item").hover(function() {
       $(this).addClass("hover"); 
    }, function() {
       $(this).removeClass("hover");
    });

});

然后用css标记你的图像：

.menu-item {
    margin: 0 0 5px 0;
}

.img {
    display: block;
    width: 200px;
    height: 30px;
    background: #ddd;
}

.menu-item.hover .img {
    background: #000;   
}

#menu2.hover .img {
    background: url("http://placehold.it/200x30") no-repeat;
}

#menu4.hover .img {
    background: url("http://placehold.it/200x30") no-repeat;
}

您也可以使用精灵表而不是javascript在后台加载图片来预加载图像。

http://jsfiddle.net/E6xtq/1/

jQuery - mouseOver更改div

3 个答案: