[jquery] How to: Add/Remove Class on mouseOver/mouseOut - JQuery .hover?

Looking to change the border color on a box..

..when the user mouses over/out..

Here's the attempted code.. Needs Work!

JQuery:

<script>
$("result").hover(
  function () {
    $(this).addClass("result_hover");
  },
  function () {
    $(this).removeClass("result_hover");
  }
);
</script>

CSS3:

<style>
  .result {
    height: 72px;
    width: 100%;
    border: 1px solid #000;
  }
  .result_hover {
    border: 1px solid #fff;
  }
</style>

HTML5:

<div class="result">
  <div class="item">
    <div id="item1">
      <i class="icon"></i>&nbsp;##
    </div>
  </div>
<div>

Thanks for looking

This question is related to jquery hover addclass removeclass jquery-hover

The answer is


You forgot the dot of class selector of result class.

Live Demo

$(".result").hover(
  function () {
    $(this).addClass("result_hover");
  },
  function () {
    $(this).removeClass("result_hover");
  }
);

You can use toggleClass on hover event

Live Demo

 $(".result").hover(function () {
    $(this).toggleClass("result_hover");
 });

Your selector is missing a . and though you say you want to change the border-color - you're adding and removing a class that sets the background-color


You could just use: {in and out function callback}

$(".result").hover(function () {
    $(this).toggleClass("result_hover");
 });

For your example, better will be to use CSS pseudo class :hover: {no js/jquery needed}

.result {
    height: 72px;
    width: 100%;
    border: 1px solid #000;
  }
  .result:hover {
    background-color: #000;
  }

You are missing the dot on the selector, and you can use toggleClass method on jquery:

$(".result").hover(
  function () {
    $(this).toggleClass("result_hover")      
  }
);

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to hover

Angular 2 Hover event How can I access a hover state in reactjs? CSS disable hover effect How to remove/ignore :hover css style on touch devices Spin or rotate an image on hover How to make in CSS an overlay over an image? How to display and hide a div with CSS? simple Jquery hover enlarge Changing image on hover with CSS/HTML CSS On hover show another element

Examples related to addclass

Jquery assiging class to th in a table addClass and removeClass in jQuery - not removing class JQuery addclass to selected div, remove class if another div is selected How to: Add/Remove Class on mouseOver/mouseOut - JQuery .hover? How do I add a new class to an element dynamically? If hasClass then addClass to parent JQuery Find #ID, RemoveClass and AddClass

Examples related to removeclass

addClass and removeClass in jQuery - not removing class JQuery addclass to selected div, remove class if another div is selected How to: Add/Remove Class on mouseOver/mouseOut - JQuery .hover? Removing elements by class name? JQuery Find #ID, RemoveClass and AddClass

Examples related to jquery-hover

How to: Add/Remove Class on mouseOver/mouseOut - JQuery .hover?