I can not realize switching the background of the page when pointing to a link. There is a menu and it is necessary that when you hover over its elements, the background of the page changes. Who faced this implementation?

<!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>
  • For future generations, the working version directly with the body <a href="#" onmouseover="body.style.backgroundImage ='url(images/01.jpg)';"> - galloko

2 answers 2

Wrap the code in document ready or move the script to the end of the document. There is no jQuery connection in the code. This must be done before the main script.

  • Thank you Deonis and for your help. It helped. - galloko
  • By the way, I found another option <a href="#" onmouseover="document.getElementById('pic').src='pics/48.gif';"> green </a> but the parameter is passed only pictures or bgcolor? How can I transmit it bgimage? - galloko
  • jsfiddle.net/sxrwt - MacPherson

something like this

  • I cannot do this with such an implementation, the fact is that if the starting background is initially specified in the CSS sheet, the script does not work in the future. - galloko
  • And [such an option] [1]? [1]: jsfiddle.net/Deonis/4W2S5/1 - Deonis
  • similarly does not work, on the background of the picture and is replaced by another picture - galloko
  • one
    Here you have with [another picture] [1]. Everything works, but it is quite possible that the second background should not be loaded immediately, but there are some ways to solve this. [1]: jsfiddle.net/Deonis/4W2S5/3 - Deonis
  • one
    Wrap the code in a DOM-Ready $ (document) .ready (function () {// code here}); // or abbreviated form $ (function () {// code here}); - Deonis