manejar el comportamiento de jQuery hover

He hecho un ejemplo simple de mi problema, así que supongo que es más fácil de entender. Tengo algunos div s que tienen un color gris, pero cuando pasas el cursor sobre uno de ellos, ves que obtienen su color verdadero. Si hago clic en uno de ellos (y se hace clic en las alertas) debería cambiar el color y el .hover() no debería funcionar más en este elemento, hasta que se haga clic en otro. Estoy sentado aquí una hora y no lo hago funcionar:

 .test { background-color: #ccc;} 

y el guion:

 $(function() { $('#d1').hover(function() { $(this).css('background-color', '#F00'); }, function() { $(this).css('background-color', '#CCC'); }); $('#d2').hover(function() { $(this).css('background-color', '#F0F'); }, function() { $(this).css('background-color', '#CCC'); }); $('#d3').hover(function() { $(this).css('background-color', '#00F'); }, function() { $(this).css('background-color', '#CCC'); }); $('#d1').click(function() { $(this).css('background-color','#F00'); alert("clicked")}); $('#d2').click(function() { $(this).css('background-color','#F0F'); alert("clicked")}); $('#d3').click(function() { $(this).css('background-color','#00F'); alert("clicked")}); 

})

para el enlace, haga clic aquí

Parece que el vuelo estacionario todavía funciona y elimina el color de fondo inmediatamente.

¡Gracias por adelantado!

Bueno, sin demasiados cambios a su código [refactoring]:

 $(function() { var clickedId = ''; $('#d1').hover(function() { $(this).css('background-color', '#F00'); }, function() { if (this.id != clickedId) { $(this).css('background-color', '#CCC'); } }); $('#d2').hover(function() { $(this).css('background-color', '#F0F'); }, function() { if (this.id != clickedId) { $(this).css('background-color', '#CCC'); } }); $('#d3').hover(function() { $(this).css('background-color', '#00F'); }, function() { if (this.id != clickedId) { $(this).css('background-color', '#CCC'); } }); $('#d1').click(function() { clickedId = this.id; $('.test').not(this).css('background-color','#CCC'); alert("clicked"); }); $('#d2').click(function() { clickedId = this.id; $('.test').not(this).css('background-color','#CCC'); alert("clicked"); }); $('#d3').click(function() { clickedId = this.id; $('.test').not(this).css('background-color','#CCC'); alert("clicked"); }); }) 

Cambios:

  • Use una variable para contener la ID del último elemento cliqueado
  • Cuando hace clic en un elemento, almacena la identificación de ese elemento cliqueado. Además, configure todos los elementos (excepto el que hizo clic) de nuevo al color de fondo original.
  • Al pasar el cursor, compruebe si el elemento que pierde el desplazamiento es la identificación del último elemento en el que se ha hecho clic (si lo está, no cambie su fondo).

Como .active aparte, probablemente usaría clases CSS y establecería .active para los elementos .test:hover , y usar .test:hover . Pero supongo que este fue un ejemplo rudimentario de JavaScript para fines de aprendizaje.

Y si quisieras ver el que tiene CSS: http://jsfiddle.net/MgTr4/1/

HTML

 

CSS

 .test { margin-left: 50px; background-color:#CCC; height: 50px; width: 50px; float: left; margin-top: 50px; } .d1 { background-color : #F00 !important;} .d2{ background-color : #F0F !important;} .d3 { background-color : #00F !important;} 

JS

  $(function() { $('.test').click(function() { $(this).hasClass($(this).data('selected-item')) ? $(this).removeClass($(this).data('selected-item')) : $(this).addClass($(this).data('selected-item')); }); }); 

Muestra http://jsfiddle.net/sheeban/gEftm/3/

Puede simplificar enormemente el código mediante el uso de clases, y los métodos jQuery .addClass y .removeClass

Working jsFiddle aquí

HTML:

 

jQuery / javascript:

 $('.test').hover( function() { if ($(this).hasClass('stick') == false) { $(this).css('background-color', $(this).attr('mycolor') ); } },function() { if ($(this).hasClass('stick') == false) { $(this).css('background-color', '#CCC'); } }); $('div').click(function() { $('div').removeClass('stick'); $(this).addClass('stick'); }); 

CSS:

 .test { background-color: #ccc;} div{width:150px;height:80px;margin:5px;} 

Para simplificarlo aún más, puede eliminar class="test" de todos los DIV y cambiar el selector de desplazamiento a:

 $('div').hover( etc etc 

Esto no interferirá con la detección del evento click en la misma colección de selectores.

Aquí tienes una solución realmente simple:

DEMO EN VIVO

  $('.test').hover(function( e ){ var hc = $(this).hasClass('test'); $(this).css({ backgroundColor : (e.type=="mouseleave" && hc) ? '#ccc' : $(this).data('c') }); }).click(function(){ $(this).toggleClass('test test2 '); }); 

teniendo este HTML:

 

y ambas clases en CSS:

 .test, .test2{ 

Es mejor usar CSS en esta situación. La solución de JavaScript es más complicada. En tu caso, puedes cambiar tu bloque de código “hover” y cambiarlo a reglas css:

 #d1:hover { background-color: #F00; } #d2:hover { background-color: #F0F; } #d3:hover { background-color: #00F; } 

Aquí hay un ejemplo: jsFiddle , después de editar: jsFiddle2