Comment: ajouter / supprimer une classe sur mouseOver / mouseOut - JQuery .hover?

Vous cherchez à changer la couleur de la bordure sur une boîte..

..quand l'utilisateur passe la souris au-dessus de/..

Voici la tentative de code.. Besoin de Travailler!

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>

Merci pour regarder

source d'informationauteur sourcingsynergy

  1. 50

    Vous avez oublié le dot de sélecteur de classe du résultat de la classe.

    Démonstration En Direct

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

    Vous pouvez utiliser toggleClass sur survolez événement

    Démonstration En Direct

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

    Vous pouvez simplement utiliser: {dans et hors de la fonction de rappel}

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

    Pour votre exemple, le mieux sera d'utiliser les CSS pseudo classe :hover: {pas de js/jquery nécessaire}

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

    Votre sélecteur manque un . et si vous dites que vous voulez changer le border-color - vous êtes l'ajout et la suppression d'une classe qui définit la background-color

  4. 1

    Il vous manque le point sur le sélecteur, et vous pouvez les utiliser toggleClass méthode jquery:

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