Hovering over an image changes HTML background

问题

Basically:

div:hover
{
body{ background-image:(bg.png); }
} 

This is logical code, I know it does not work, but its the best how I can show you my problem.

回答1:

In css ,You can not do this as "body" is parent element to "div" and it should come next to the element hovered to use the for format like

firstelement:hover second_element {/*styles*/} 

you can use jquery to achieve it

$("div").hover(function(){
    $("body").css("background", "url('url_of_image_here')")
});

or javascript

   elem = document.getElementById("ID");
   elem.addEventListener("mouseout", function(){   
      document.getElementsByTagName("body")[0].style.backgroundImage="url()";
     });

回答2:

Well what your trying to accomplish cannot be achieved that way using Css only, You can do it using jquery like this

$("#someDiv").hover(function(){
    $("body").css("background-image", "url('image_url')")
});

来源：https://stackoverflow.com/questions/26822311/hovering-over-an-image-changes-html-background