новое фоновое изображение для каждого родительского элемента меню при наведении

Мне интересно, как это сделать. У меня есть меню, которое сидит в контейнере высотой 500 пикселей с фоновым изображением. Я хочу, чтобы иметь возможность изменять фоновое изображение, зависая над родительским элементом меню. Я думал, что это может быть достигнуто что-то вроде:новое фоновое изображение для каждого родительского элемента меню при наведении

JQuery:

$('#elm').hover(
    function(){ $(this).addClass('hover') }, 
    function(){ $(this).removeClass('hover') } 
)

Или с .toggleClass

, а затем просто определить фоновое изображение в классах CSS они переключаются. У меня есть все настройки для первого пункта меню в моем DEMO HERE, но в настоящее время он не работает. Кажется, так прямо, я не понимаю, почему он не работает. Любая помощь будет отличной ... спасибо, ребята.

* я одна функция закомментирована в примере попробовать различные способы

источник

2014-02-11 David Coggins

ли вы имеете в виду, как: при наведении курсора на «Domaine де Gourjo»: один фоновое изображение, при наведении курсора на «Наши вина»: другой фоном изображения? –

'#elm: hover {}' – bjb568

Чтобы уточнить, вы ищете большое фоновое изображение для изменения при наведении на элемент меню. Верный? – brouxhaha

вы что-то отсутствует в коде

$('.image-changer-hover').toggleClass('image-changer-hover2');

должен быть

$('.image-changer-hover1').toggleClass('image-changer-hover2');

и запуск Jquery кода, как это:

$(document).ready(function(){ 
..... 
..... 
..... 
});

это работает http://jsfiddle.net/wR7PN/8/

источник

2014-02-11 17:50:10

Это именно то, что я хотел сделать ... собираюсь попробовать на настоящем веб-сайте. Спасибо. –

Просто используйте простой CSS.

#elm { 
    /*Style when not hovered*/ 
    background: url(http://placehold.it/200x300); 
} 

#elm:hover { 
    /*Style when hovered*/ 
    background: url(http://placekitten.com/200/300); 
}

источник

2014-02-11 17:45:10 Kroltan

Я согласен, но я не думаю, что это то, что он ищет. Я уверен, что он хочет, чтобы большое фоновое изображение менялось при наведении. – brouxhaha

@brouxhaha Концепция по-прежнему остается прежней. Я отредактировал ответ, так что он еще яснее. – Kroltan

Нет, это не так. Он хочет, чтобы фоновое изображение родительского div изменилось, когда он зависает над пунктом меню. Это невозможно сделать с помощью css. Если он хочет, чтобы фон li изменился, тогда да. Ответ, который задает @Sam Battat, - это вопрос. – brouxhaha

я соединял быстрый jsFiddle, который должен решить вашу проблему: http://jsfiddle.net/2a6Rg/

Everytime вы парить над Ли, класс, определенный data-element добавляется к родителю, так что вы можете изменить фон с помощью CSS.

Важно код:

$('#nav li').hover(
    function() { 
     $(this).parent().addClass($(this).data('element')); 
    }, 
    function() { 
     $(this).parent().removeClass($(this).data('element')); 
    } 
);

источник

2014-02-11 17:47:10 markusthoemmes

новое фоновое изображение для каждого родительского элемента меню при наведении

ответ

Смежные вопросы