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.










Example how add and remove classes to elements


<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:

JSFiddle







Privacy Policy