1

Не могу реализовать переключение фона страницы при наведение на ссылку. Есть меню и необходимо чтобы при наведении на его элементы, менялся фон страницы. Кто сталкивался с такой реализацией?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    font-size: 1em;
    text-shadow: 1px 1px 1px #000000, 0 0 7px #000000;
    color: #FFF;
    background: url(http://cred-fin.ru/_ph/1/2/724349401.jpg) 0 0 repeat;
}
.green-bg {
    background-image: url(http://img.pixasa.net/static/3/a/2/3a202aa5-0c13-4214-ab53-ddc39ef80cef.jpg);
    background-color: #060;
}
</style>
<script type="text/javascript">
var _body = $('body');
$('span').on({
    mouseenter: function(){
        _body.toggleClass('green-bg');
    },
    mouseleave: function(){
        _body.toggleClass('green-bg');
    }
});
</script>
</head>
<body>

<span>Hover me</span>
</body>
</html>
1
  • Для будущих поколений, рабочий вариант напрямую с body <a href="#" onmouseover="body.style.backgroundImage = 'url(images/01.jpg)';">
    – galloko
    30 янв 2014 в 1:16

2 ответа 2

2

Оберните код в document ready или переставьте скрипт в конец документа. В коде нет подключения jQuery. Это нужно сделать до перед основным скриптом.

3
  • Спасибо Deonis и вам за помощь. Помогло.
    – galloko
    29 янв 2014 в 10:40
  • Кстати нашел еще один вариант <a href="#" onmouseover="document.getElementById('pic').src='pics/48.gif';">зеленый</a> но параметр передается только картинки или bgcolor? как его можно передавать bgimage?
    – galloko
    29 янв 2014 в 10:44
  • jsfiddle.net/sxrwt
    – MacPherson
    30 янв 2014 в 22:25
0

примерно так

6
  • при такой реализации у меня не получается, дело в том что если в CSS листе изначально указан стартовый фон, то в дальнейшем скрипт не работает.
    – galloko
    28 янв 2014 в 16:10
  • А [такой вариант][1]? [1]:jsfiddle.net/Deonis/4W2S5/1
    – Deonis
    28 янв 2014 в 16:27
  • аналогично не работает, на фоне картинка и заменяется другой картинкой
    – galloko
    28 янв 2014 в 18:36
  • 1
    Вот вам с [другой картинкой][1]. Всё работает, но вполне возможно, что второй фон подгрузиться не сразу, но для этого есть свои способы решения. [1]:jsfiddle.net/Deonis/4W2S5/3
    – Deonis
    28 янв 2014 в 18:51
  • 1
    Оберните код в конструкцию DOM-Ready $(document).ready(function(){ // тут код }); // или сокращенная форма $(function(){ // тут код });
    – Deonis
    28 янв 2014 в 21:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.