jquery - imagen - Cambie el color de fondo con el mouseover y elimínelo después de mouseout

jquery css() hover

Question

Tengo mesa que clase es el forum . Mi código jQuery:

<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>

Funciona perfectamente, pero es posible hacerlo de una manera más eficiente sin var color = $(this).css("background-color"); . Justo después del mouseout deje el color de fondo anterior y elimine #380606 ? Gracias.

Answer 1

Esta es mi solución:

$(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;
}
})

Answer 2

Establece el color de fondo original en tu archivo CSS:

.forum{
    background-color:#f0f;
}​

No tienes que capturar el color original en jQuery. Recuerde que jQuery modificará el estilo INLINE, por lo que al establecer el color de fondo en nulo obtendrá el mismo resultado.

$(function() {
    $(".forum").hover(
    function() {
        $(this).css(''background-color'', ''#ff0'')
    }, function() {
        $(this).css(''background-color'', '''')
    });
});​

Answer 3

Esto debe establecerse directamente en el CSS.

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

Si está preocupado por el hecho de que el IE6 no acepte desplazarse sobre los elementos que no son enlaces, puede usar el evento activable de jQuery para la compatibilidad.

Answer 4

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'');
  }
);

Answer 5

Si no te importa IE ≤6, puedes usar CSS puro ...

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

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

#blue { background-color: blue; }

<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>

Con jQuery, generalmente es mejor crear una clase específica para este estilo:

.forum_hover { background-color: #380606; }

y luego aplique la clase en mouseover, y elimínela en mouseout.

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

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

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

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

<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 no debe modificar la clase, puede guardar el color de fondo original en .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);
  });

$(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);
  });
});

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

<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>

o

  $(''.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''));
    }
  );   

$(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''));
    }
  );    
});

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

<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>

Answer 6

Después de mucha lucha finalmente consiguió que funcionara. (Perfectamente probado)

El siguiente ejemplo también apoyará el hecho de que el color del botón que ya se hizo clic no debe ser un cambio.

Código JQuery

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;
    }
});

Answer 7

Prueba esto, es funcional y simple.

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;
}​

demo en vivo

http://jsfiddle.net/caBzg/