CODEWITHSUNDEEP
javascript
katie k
katie k

Reputation: 3

Remove class on mouseleave

I have jQuery code that adds class feather to the div on mouseover if it has class active-s-c-card. I need to remove this class on mouseleave. Would be happy for any suggestions how to improve the current code. Thanks!

jQuery(document).ready(function($) {
  $("body").on("mouseover" ,function(){
    if ($(".panel-s-c-3").hasClass("active-s-c-card")) {
      $(".panel-s-c-3").addClass("feather");
    }
  });
});

Upvotes: 0

Views: 1200

Answers (4)

Incredible311
Incredible311

Reputation: 21

The below is jQuery javascript that performs the same function.

$(".active-s-c-card").on("mouseover" ,function(){
      $(this).removeClass("feather")
});
$(".active-s-c-card").on("mouseleave" ,function(){
  $(this).removeClass("feather")
});

OR

document.body.onmouseover = function() {mouseOver()};
document.body.onmouseout = function() {mouseOut()};
function mouseOver() {
  var element = document.getElementByClassName("panel-s-c-3");
  element.classList.add("feather");
}

function mouseOut() {
  var element = document.getElementByClassName("panel-s-c-3");
  element.classList.remove("feather");
}

Upvotes: 1

Titulum
Titulum

Reputation: 11496

You can easily do this using vanilla JavaScript:

const elements = document.getElementsByClassName('inner');

for (const element of elements) {
  element.addEventListener('mouseenter', () => element.classList.add('red'));
  
  if (element.classList.contains('required-class')) {
    element.addEventListener('mouseleave', () => element.classList.remove('red'));
  }
}
#container {
  padding: 50px;
  background-color: green;
  display: flex;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: white;
  margin-bottom: 25px;
  margin-right: 25px;
}

.red {
background-color: red;
}
<div id="container">
  <div class="inner required-class">
    With class
  </div>

  <div class="inner">
    Without class
  </div>
</div>

Upvotes: 1

Prahsant Sharma
Prahsant Sharma

Reputation: 360

You simply can apply removeClass just you did the addClass I am just sharing you the basics not the exact thing so that you understand well.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").removeClass("blue");
  });
});
</script>
<style>
.blue {
  color: blue;
}
</style>
</head>
<body>

<h1 class="blue">Heading 1</h1>
<h2 class="blue">Heading 2</h2>

<p class="blue">This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Remove class from elements</button>

</body>
</html>
  

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color", "yellow");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color", "lightgray");
  });
});
</script>
</head>
<body>

<p>Move the mouse pointer over this paragraph.</p>

</body>
</html>

Upvotes: 1

Eneas Mar&#237;n
Eneas Mar&#237;n

Reputation: 164

There you go, when leaving the active-s-c-card element:

$(".active-s-c-card").on("mouseleave" ,function(){
  $(this).removeClass("feather")
});

Upvotes: 0

Related Questions