Обмен и сохранение цвета фона с jquery

У меня есть меню, где при каждом наведении его ссылок меняется цвет фона моей страницы. Теперь предположим, что мой цвет index.html по умолчанию - синий, и когда я нахожусь на контакте, у меня есть желтый и красный. Если я нажму на страницу, его цвет фона будет желтым, и если я нахожусь на дому, он снова станет синим. Что происходит, когда я нахожусь на обратной стороне страницы, фон снова менялся на синий, так же, если бы я зависал при контакте.Обмен и сохранение цвета фона с jquery

Здесь есть мой код в JS

$(document).ready(function() { 
    $('#about').hover(function() { 
     $('body').css('background-color', 'yellow'); 
    }, function() { 
     $('body').css('background', ''); 
    }); 
    $('#contact').hover(function() { 
     $('body').css('background-color', 'red'); 
    }, function() { 
     $('body').css('background', ''); 
    });

И здесь есть меню

<a id="about" href="about.html">about</a> 
<a id="contact" href="contact.html">contact</a>

Я предполагаю, что я должен сделать что-то вроде проверки, если текущий цвет фона соответствует парил один, на MouseOut сохраните этот цвет, в противном случае установите его на начальный.

Я не эксперт JS, особенно когда дело доходит до условий. Кто-нибудь может мне помочь?

Спасибо!

источник

2016-05-09 Mirco Fragomena

Если вы хотите, чтобы цвет оставаться такими же после зависания, то вы должны удалить второй параметр парения():

$(document).ready(function() { 
    $('#about').hover(function() { 
    $('body').css('background-color', 'yellow'); 
    }); 
    $('#contact').hover(function() { 
    $('body').css('background-color', 'red'); 
    }); 
});

https://jsfiddle.net/as9jpopd/

** EDIT **

Если вы хотите, чтобы цвет изменялся только тогда, когда пользователь перемещает мышь по ссылке, а затем обратно, тогда ваш код должен работать, только отсутствующие замыкающие скобки:

$(document).ready(function() { 
    $('#about').hover(function() { 
    $('body').css('background-color', 'yellow'); 
    }, function() { 
    $('body').css('background', ''); 
    }); 
    $('#contact').hover(function() { 
    $('body').css('background-color', 'red'); 
    }, function() { 
    $('body').css('background', ''); 
    }); 
});

источник

2016-05-09 13:34:32

Это работало для вас? –

Я не хочу оставаться на месте. Если страница должна быть желтой, то при изменении цвета меняется, но когда мышь, мы возвращаемся к желтому. Поскольку я объявлял цвет домашней страницы с помощью CSS, когда я mouseOut CSS сбрасывает цвет в общий кусок CSS один (синий), а не желтый. Каждая страница имеет собственный цвет, а домашняя страница синяя и объявлена с помощью CSS .. когда я на странице, которая должна быть желтой, она желтая, когда она загружается, но тогда мой JS сбрасывает цвет на ' то есть синий .. –

В основном, когда я нахожу, то цвет должен быть тем, который первоначально был объявлен с помощью CSS только для этой конкретной страницы, а не для цвета фона тела. Это похоже на цвет кузова bg, не имеет цвета, но каждая страница имеет свой собственный bg color –

Благодаря Joachim, но, к сожалению, это не сработало. Я загрузил раннюю страницу сайта, чтобы вы могли взглянуть на проблему и поведение bg. http://mircofragomena.com/

Как вы видите на первой странице, bg белый, но при наведении изменений. Если вы нажмете на pickabrew, вы увидите страницу желтым цветом, как при зависании, но если вы снова вернетесь в меню hover/out, страница вернется в белый цвет как передняя страница. Он должен оставаться желтым, хотя это должно происходить с каждым другим цветом/страницей.

источник

2016-05-15 13:50:55

Я сейчас, используя этот другой код

 $(function() { // Shorthand for $(document).ready(function() { 
    var body = $('body'); 
    var bg = body.css('background-color'); 
    $('ul.nav a').hover(function() { 
       body.css('background-color', $(this).data('bgColor')); 
     }, function() { 
       body.css('background-color', bg); 
     });

});

, связанные с этим по ссылкам

   <li><a href="../posters/index.html" data-bgColor="#F2C40D">Posters</a></li>

хотя он не работает. Это хороший стартовый код?

источник

2016-05-20 13:02:49

Обмен и сохранение цвета фона с jquery

ответ

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