In jQuery mouse cursor effects provides a combination of events and methods, which allow HTML elements to change classes without clicking a button.
In this example mouseover event add classes to element, while mouseout doing the opposite, removes added classes of element.
<title>IT present- jQuery example</title
</style>
.a {background-image:url("images/pampkin.png");}
.b {background-image:url("images/paws.png");}
.c {background-image:url("images/wall.png");}
.d {background-image:url("images/stars.png");}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("img").mouseover(function(){
$("body").addClass(this.className);
})
.mouseout(function(){
$("body").removeClass(this.className);
});
});
</script>
</head>
<body>
<img class="a" src="images/pumpkins.png">
<img class="b" src="images/paws.png">
<img class="c" src="images/wall.png">
<img class="d" src="images/stars.png">
<body
<html>
result: