Search code examples
htmlcsshoverbackground-colormouseover

How can I change entire Website Background Color when I Mouseover

How can I change ENTIRE WEBSITE Background Color when I Mouseover image,text etc.

Solution

  • hope this will help to you.but you may need little bit jquery.paste this and try it.you may need internet connection because I have linked jquery online.

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
 .classOne{
 	background-color: orange;
 	color: white;
 }
  
 .changeme{
   cursor:pointer;
   }

</style>

</head>

<body>
	<p class="changeme">change the body background color</p>
	

<script type="text/javascript">
 $(document).ready(function(){
 	$(".changeme").mouseenter(function(){
 		$('body').addClass("classOne");
 	});
 	$(".changeme").mouseleave(function(){
 		$('body').removeClass("classOne");
 	});
 	

 });
</script>


</body>
</html>

    you can use this with any other element such any img,div, etc....

    or, if you want to change only the body background with css,you can use hover like this

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery</title>

<style type="text/css">
  
  body:hover{
  	background-color: orange;
  	color: white;
  }

</style>

</head>

<body>
	<p>change the body background color</p>
	

</body>
</html>