Change la couleur de fond à la souris et les supprimer après mouseout

J'ai un tableau qui classe est forum. Mon jquery code:

<script type="text/javascript">
    $(document).ready(function() {
        $('.forum').bind("mouseover", function(){
            var color  = $(this).css("background-color");

            $(this).css("background", "#380606");

            $(this).bind("mouseout", function(){
                $(this).css("background", color);
            })    
        })    
    })
</script>

Il fonctionne parfaitement, mais est-il possible de le faire de manière plus efficace sans var color = $(this).css("background-color");. Juste après mouseout quitter la précédente couleur de fond et de supprimer #380606? Merci.

Est-il une raison pour laquelle vous avez besoin de lui en JQuery par intérêt? Comme c'est le type de chose CSS est utilisé pour, ainsi, l'une des réponses ci-dessous l'idéal serait, dans la plupart des situations.

InformationsquelleAutor good_evening | 2010-09-18

Si vous n'avez pas de soins sur IE ≤6, vous pouvez utiliser pur CSS ...

.forum:hover { background-color: #380606; }

CSS:

.forum { color: white; }
.forum:hover { background-color: #380606 !important; }
/* we use !important here to override specificity. see http://stackoverflow.com/q/5805040/*/

#blue { background-color: blue; }

HTML:

<meta charset=utf-8>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

Avec jQuery, il est généralement préférable de créer une classe spécifique pour ce style:

.forum_hover { background-color: #380606; }

et d'appliquer ensuite la classe à la souris, et le retirer sur mouseout.

$('.forum').hover(function(){$(this).toggleClass('forum_hover');});

JS:

$(document).ready(function(){
  $('.forum').hover(function(){$(this).toggleClass('forum_hover');});
});

CSS:

.forum_hover { background-color: #380606 !important; }

.forum { color: white; }
#blue { background-color: blue; }

HTML:

<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

Si vous ne devez pas modifier la classe, vous pourriez économiser de l'original de la couleur d'arrière-plan dans .data():

  $('.forum').data('bgcolor', '#380606').hover(function(){
    var $this = $(this);
    var newBgc = $this.data('bgcolor');
    $this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);
  });

JS:

$(document).ready(function(){
  $('.forum').data('bgcolor', '#380606').hover(function(){
    var $this = $(this);
    var newBgc = $this.data('bgcolor');
    $this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);
  });
});

CSS:

.forum { color: white; }
#blue { background-color: blue; }

HTML:

<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

  $('.forum').hover(
    function(){
      var $this = $(this);
      $this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
    },
    function(){
      var $this = $(this);
      $this.css('background-color', $this.data('bgcolor'));
    }
  );

JS:

$(document).ready(function(){
  $('.forum').hover(
    function(){
      var $this = $(this);
      $this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
    },
    function(){
      var $this = $(this);
      $this.css('background-color', $this.data('bgcolor'));
    }
  );    
});

CSS:

.forum { color: white; }
#blue { background-color: blue; }

HTML:

<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

Non, j'ai besoin de ce fait en Jquery en fait, c'est juste un morceau de code.

InformationsquelleAutor kennytm

17

Placez l'original couleur d'arrière-plan dans vous fichier CSS:
```
.forum{
    background-color:#f0f;
}
```
Vous n'avez pas à capturer la couleur d'origine de jQuery. Rappelez-vous que jQuery va modifier le style INLINE, donc par définition de la couleur d'arrière-plan pour les nuls, vous obtiendrez le même résultat.
```
$(function() {
    $(".forum").hover(
    function() {
        $(this).css('background-color', '#ff0')
    }, function() {
        $(this).css('background-color', '')
    });
});
```
- C'est une excellente réponse! et il fonctionne parfaitement... Testé dans firebugs
- Merci, appréciée! Si vous le souhaitez, vous pouvez inclure jquery.couleur plugin. Ensuite, vous avez la possibilité de changer de couleur avec animation. par exemple, $(this).animate({backgroundColor:'#ff0'},400);
InformationsquelleAutor Marc Uberstein

Essayer cela , son travail simple et

HTML

<html>
<head></head>
<body>
    <div class="forum">
        test
    </div>
</body>
</html>

Javascript

$(document).ready(function() {
    var colorOrig=$(".forum").css('background-color');
    $(".forum").hover(
    function() {
        //mouse over
        $(this).css('background', '#ff0')
    }, function() {
        //mouse out
        $(this).css('background', colorOrig)
    });
});

css

.forum{
    background:#f0f;
}

démonstration en direct

http://jsfiddle.net/caBzg/

votre variable colorOrig sera de retour null comme valeur de la propriété css "background" sélecteur est illisible par jQuery... utilisation de la "couleur de fond" ou "backgroundColor" au lieu
c'est vrai que j'ai édité le code, veuillez revoir

InformationsquelleAutor Pramendra Gupta

3

Cela devrait être défini directement dans le CSS.
```
.forum {background-color: #123456}
.forum:hover {background-color: #380606}
```
Si vous êtes préoccupé par le fait que le IE6 ne sera pas accepter passez la souris sur les éléments qui ne sont pas des liens, vous pouvez utiliser le passez la souris cas de jQuery pour la compatibilité.

InformationsquelleAutor Andrea

HTML:

<div id="id">
</div>
<div id="hiddenDiv" style="display:none;"></div>

jQuery:

$('#id').hover(function(){
    $("#hiddenDiv").css('display','block');
  },
  function(){
    $("#hiddenDiv").css('display','none');
  }
);

InformationsquelleAutor anuja

Après beaucoup de luttes a finalement obtenu ce travail. ( Parfaitement testé)

L'exemple ci-dessous permettra également de soutenir le fait que la couleur de déjà cliqué bouton ne doit pas être des changements

JQuery Code

var flag = 0; //Flag is to check if you are hovering on already clicked item

$("a").click(function() {
    $('a').removeClass("YourColorClass");
    $(this).addClass("YourColorClass");
    flag=1;
}); 

$("a").mouseover(function() {
    if ($(this).hasClass("YourColorClass")) {
        flag=1;
    }
    else{
        $(this).addClass("YourColorClass");
    };
});

$("a").mouseout(function() {
    if (flag == 0) {
        $(this).removeClass("YourColorClass");
    }
    else{
        flag = 0;
    }
});

InformationsquelleAutor Abhishek Goel

C'est ma solution :

$(document).ready(function () {
  $( "td" ).on({
    "click": clicked,
    "mouseover": hovered,
    "mouseout": mouseout
});

var flag=0;

function hovered(){
  $(this).css("background", "#380606");
}

function mouseout(){
  if (flag == 0){
  $(this).css("background", "#ffffff");
} else {
  flag=0;
}
}

function clicked(){
  $(this).css("background","#000000");
  flag=1;
}
})

InformationsquelleAutor Priyanka

Vous devez vous connecter pour publier un commentaire.