jquery - trigger - on mouse over on mouse out

Cómo: Agregar/Eliminar clase en mouseOver/mouseOut-JQuery.hover?

Question

Buscando cambiar el color del borde en una caja ..

..cuando el usuario mueve hacia arriba / hacia fuera ..

Aquí está el intento de código ... Necesita trabajo!

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>

Gracias por mirar

Answer 1

A su selector le falta un . y aunque dices que quieres cambiar el border-color del border-color , estás agregando y eliminando una clase que establece el background-color

Answer 2

Le falta el punto en el selector y puede usar el método toggleClass en jquery:

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

Answer 3

Puede usar: {call and out call call}

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

Para su ejemplo, mejor será usar pseudo clase CSS :hover : {no js / jquery needed}

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

Answer 4

Se olvidó el dot del selector de clase de la clase de resultado.

Demo en vivo

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

Puedes usar toggleClass en el evento hover

Demo en vivo

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