jQuery - изменить div с помощью мыши

У меня есть меню, в котором при наведении курсора мыши на каждый элемент изображение, загруженное во второй div, должно измениться, а onMouseout должно заменить исходное содержимое.

На данный момент я сохраняю исходный контент в переменную и создаю событие 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*.. ....

});

Вопрос:

  1. Есть ли способ создать общую функцию, которая может обрабатывать параметр из тега меню?
  2. Было бы проще .. вместо замены тегов img innerHTML для создания скрытых div, которые отображаются/скрываются событиями onMouseover/onMouseout?

Полный пример: пример сайта


javascript html jquery css onmouseover
person lmgobaira    schedule 03.06.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете легко создать общую функцию. Вы можете добавить в тег #menu1 атрибут с URL-адресом вашего изображения и таким именем класса:

 <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
person Karl-André Gagnon    schedule 03.06.2013

arrow_upward
1
arrow_downward

Лучше хранить исходный код изображения в атрибуте 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 вместо отдельного обработчика для каждого пункта меню.

person Sushanth --    schedule 03.06.2013
comment
это было бы здорово, но я меняю ‹p› на ‹img›. Я определенно собираюсь использовать теги data-src, хотя это именно то, что я искал! - person lmgobaira; 05.06.2013

arrow_upward
1
arrow_downward

На самом деле лучше использовать 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 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/

person JMParsons    schedule 03.06.2013