jquerytoggletoggleclass

Toggle class only on the div that is being hovered

I would like to know if there's a way to toggle a class only o the div that is being currently hovered.

My current code:

<script language="javascript" type="text/javascript">

$(document).ready(function () {

   $(".recipe-content").hover(function(){

     $(".recipe").toggleClass("hover");

   });

});

</script>

The code works but the problem is that the toggle is being executed on other divs that I have with the same name.

How could I prevent this?

Solution

  • Yes, $(this) is the specific element where the element is being occurred at:

    $(document).ready(function () {

   $(".recipe-content").hover(function(){

     $(this).toggleClass("hover");

   });

});