How can I change ENTIRE WEBSITE Background Color when I Mouseover image,text etc.
Asked
Active
Viewed 418 times
2 Answers
2
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>

caldera.sac
- 4,918
- 7
- 37
- 69
1
Without seeing your code and making a guess, I imagine you could use a css selector more specifically :hover
if you just want it to change when you hover and at no other point. http://www.w3schools.com/cssref/sel_hover.asp

sringland
- 131
- 6