jQuery - mouseOver 改变 div答案

【问题标题】：jQuery - mouseOver change divjQuery - mouseOver 改变 div
【发布时间】：2013-05-30 02:22:36
【问题描述】：

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

此时，我将原始内容保存到一个 var 中，并为每个菜单项创建一个 onMouseover 和 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 标签来创建隐藏的 div 由 onMouseover/onMouseout 事件显示/隐藏？

完整示例： Sample Site

【问题讨论】：

标签： javascript jquery html css onmouseover

【解决方案1】：

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

背景可以是 css、url、颜色等中的任何内容。

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

继续。

简单的js悬停使用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/

【讨论】：

【解决方案2】：

最好将图片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 将只有一个事件处理程序，而不是每个菜单项都有一个单独的处理程序。

【讨论】：

这很好，但我将
换成了。我肯定会使用 data-src 标签，尽管它们正是我想要的！

【解决方案3】：

您可以轻松创建通用函数。您可以在#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 img 而不是更改整个 HTML。

$('#swapspace').find('img').attr('src', $(this).data('src')); //on hover
$('#swapspace').find('img').attr('src', ''); //on out

【讨论】：