mouseover() mouseout() jQuery add/removeClass problema

Question

Estoy tratando de crear un simple efecto mouseover usando una combinación de mouseover, mouseout, addClass y removeClass. Básicamente, cuando el usuario pasa el mouse sobre un elemento, quiero aplicar un borde diferente (1px gris discontinuo). El estado inicial es "1px blanco sólido". Tengo una clase llamada "resaltar" que simplemente tiene "borde: 1px gris punteado" en ella. Quiero agregar esa clase onmouseover y eliminarla en onmouseout pero no puedo obtener el efecto que quiero a menos que use! Important en la clase "highlight".

Answer 1

Parece que tienes el javascript funcionando bien tal como está, pero es solo un problema con el specificity of your CSS rules, por lo que !important lo hace funcionar.

Solo tiene que hacer que sus reglas css resaltadas sean más específicas que las reglas no resaltadas.

#someItem ul li { /* Specificity = 102 */ 
    border-color: white; 
} 

.highlight { /* Specificity = 10 -- not specific enough! */ 
    border-color: grey;  
} 

#someItem ul li.highlight { /* Specificity = 112 -- this will work */ 
    border-color: grey;  
} 

---

edición con más explicaciones:
Digamos que las partes pertinentes de su código HTML siguiente aspecto:

<div id="someItem"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
</div> 

y usted tiene este CSS:

#someItem ul li { 
    border: 1px solid white; 
} 
.highlight { 
    border-color: grey; 
} 

Actualmente, todos los elementos de la lista en el ul en #someItem div tendrá un borde blanco, y nada tiene la clase highlight así que nada es gris.

través de cualquier medio que desee (en su caso un evento de vuelo estacionario con jQuery), se agrega una clase a uno de los elementos:

$(this).addClass('highlight'); 

El HTML a partir de ahora ser algo como esto:

<div id="someItem"> 
    <ul> 
     <li>Item 1</li> 
     <li class="highlight">Item 2</li> 
     <li>Item 3</li> 
    </ul> 
</div> 

Hasta ahora, su Javascript y HTML funcionan bien, ¡pero usted no ve un borde gris! El problema es tu CSS. Cuando el navegador está tratando de decidir cómo diseñar el elemento, observa todos los diferentes selectores que se dirigen a un elemento y los estilos definidos en esos selectores. Si hay dos selectores diferentes que definen el mismo estilo (en nuestro caso, el color del borde es impugnado), entonces tiene que decidir qué estilo aplicar y qué ignorar. Lo hace por medio de lo que se conoce como "Especificidad", es decir, cuán específico es un selector. Como se describe en el HTML Dog article, lo hace asignando un valor a cada parte de su selector, y gana el que tenga el puntaje más alto. Los puntos son:

• selector de elementos (por ejemplo: "ul", "Li", "mesa") = 1 punto
• selector de clase (por ejemplo: "DESTACAR", ".active",". menú ") = 10 puntos
• Identificación del selector (por ejemplo: "#someItem", "#mainContent") = 100 puntos

Hay algunas reglas más, por ejemplo: la palabra clave !important y también los estilos en línea, pero eso es casi irrelevante para esto, uhh ... "lección". La única otra cosa que debes saber es que si dos selectores tienen la misma especificidad, entonces gana el definido más adelante en el archivo.

Volviendo a su problema, dado el CSS que teníamos antes, podemos ver por qué está todavía no tiene un borde gris:

 
#someItem ul li = id + element + element = 100 + 1 + 1 = 102 points 
.highlight = class = 10 points 

Como se mencionó anteriormente, la solución es crear un selector más específico:

 
#someItem ul li.highlight 
    = id + element + element + class 
    = 100 + 1 + 1 + 10 
    = 112 points 

Y para responder a su pregunta en los comentarios, no es necesario cambiar ninguna de sus JavaScript o HTML para que esto funcione.Si usted analiza que el selector, lo que está diciendo es:

Busque el elemento con id "someItem", dentro de esa mirada de un elemento ul, y luego un elemento li que tiene la clase "destacado" en él .

... y ahora, dada la sencilla .addClass() llamada que usted hizo anteriormente, los li satisface estas condiciones, por lo que la frontera debe tornarse gris.

Answer 2

supongo que está utilizando un estilo en línea en el elemento para el estilo inicial:

<style type="text/css"> 
    .hover { border: 1px dashed gray; } /* will never apply */ 
</style> 

... 

<!-- this style has priority over class styles! --> 
<div style="border: 1px solid white"> 
... 
</div> 

Esto anulará los estilos aplicados usando una clase ... Así que en lugar de utilizar los estilos en línea, simplemente utilizar una clase inicial diferente para aplicar los estilos iniciales:

<style type="text/css"> 
    .normal { border: 1px solid white; } 
    .hover { border: 1px dashed gray; } 
</style> 

... 

<div class="normal"> 
... 
</div> 

Answer 3

¿Ha considerado un enfoque puro CSS?

Por ejemplo:

someClass { 
    border: 1px solid white; 
} 

someClass:hover { 
    border: 1px dashed gray; 
} 

La clase hover seudo le dará el comportamiento que desea: cuando el usuario se desplaza el ratón sobre el elemento, se utilizará el estilo más baja, de lo contrario se utilizará el primer estilo .

Nota: como alguien comentó, esto no funciona para los elementos no a en IE. Sin embargo, funciona para mí en Chrome, Firefox, Safari y Opera.

También funciona para cualquier elemento en el modo de estándares IE8 e IE7. Aunque no tengo IE6 para probar.

Answer 4

Este es un ejemplo de un vuelo estacionario he utilizado:

$(".myclass").hover(jbhovershow,jbhoverhide); 


jbhovershow = function() { 
      $(this).addClass("jimtest"); 
      }; 

jbhoverhide = function() { 
      $(this).removeClass("jimtest"); 
      } 

que realmente no tiene que romper algo tan sencillo arriba en funciones separadas.

Sospecho que su problema podría ser debido a un conflicto en el CSS: intente aplicar su clase de resaltado mediante el código duro, o con un clic y vea si realmente funciona.

Espero que ayude

Jim

Answer 5

CSS:

div.target { 
    border: 1px solid #000000; 
} 

div.target-hover { 
    border-color: #ff0000; 
} 

JS:

$("div.target").hover(
    function() { 
     $(this).addClass("target-hover"); 
    }, 
    function() { 
     $(this).removeClass("target-hover"); 
    } 
); 

que suele hacer de esta manera. (permite más opciones)

Answer 6

De Jquery 1.3.3 podrás hacer esto un poco más simple. Habrá un enhanced version of .toggleClass() disponible que será muy poderoso.

Si no es necesario romper esto en una función a partir de entonces 1.3.3 usted será capaz de hacer simplemente:

$(".myclass").hover(function(){ $(this).toggleClass('highlight'); }); 

Si va a tener que incluir importante entonces su punto culminante la clase puede necesitar ser más específica (ver CSS Specificity).

Answer 7

O simplemente puede hacerlo con una simple mediante el uso de CSS:

#namehere { border: 1px solid #fff; } 
#namehere:hover { border: 1px dashed #aaa }