Comment faire: Ajouter/Supprimer la classe sur mouseOver/mouseOut - JQuery.planer?

on cherche à changer la couleur de la bordure d'une boîte..

..lorsque l'utilisateur passe la souris dessus..

voici le code de la tentative.. 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

17
demandé sur sourcingsynergy 2013-05-29 22:44:07

4 réponses

Vous avez oublié le dotsélecteur de classe de la classe de résultat.

Démonstration

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

Vous pouvez utiliser toggleClasspassez la souris événement

Démonstration

 $(".result").hover(function () {
    $(this).toggleClass("result_hover");
 });
51
répondu Adil 2013-05-29 18:55:51

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

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

Pour ton 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;
  }
9
répondu A. Wolff 2013-05-29 18:51:37

il manque un . et si vous dites que vous voulez changer border-color - vous ajoutez et supprimez une classe qui définit le background-color

2
répondu Klors 2013-05-29 18:48:42

vous manquez le point sur le sélecteur, et vous pouvez utiliser la méthode toggleClass sur jquery:

$(".result").hover(
  function () {
    $(this).toggleClass("result_hover")      
  }
);
1
répondu isJustMe 2013-05-29 18:47:11