sourcingsynergy sourcingsynergy - 26 days ago 14
jQuery Question

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

Answer

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