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

Question

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

Answer 1

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");  });