web-dev-qa-db-fra.com

Comment: ajouter / supprimer des classes sur mouseOver / mouseOut - JQuery .hover?

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

..quand l'utilisateur souris sur/dehors ..

Voici le code tenté .. 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>

Merci d'avoir regardé

jqueryhoveraddclassremoveclassjquery-hover
24
sourcingsynergy

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

démonstration en direct

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

Vous pouvez utiliser toggleClass sur survoler événement

démonstration en direct

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

Vous pouvez simplement utiliser: {callback function in and out}

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

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

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

Il manque à votre sélecteur un . et bien que vous disiez vouloir changer le border-color - vous ajoutez et supprimez une classe qui définit le background-color

2
Klors

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

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