将鼠标悬停在图像上会更改HTML背景 [英] Hovering over an image changes HTML background

问题描述

基本上：

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.

推荐答案

在css中，你不能这样做，因为body是父元素div，它应该出现在元素旁边，使用for格式，如

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*/} 

你可以用jquery来实现它

you can use jquery to achieve it

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

或javascript

or javascript

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

这篇关于将鼠标悬停在图像上会更改HTML背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！