mouseover() mouseout() jQuery add/removeClass problem

Question

Sto cercando di creare un semplice effetto mouseover usando una combinazione di mouseover, mouseout, addClass e removeClass. Fondamentalmente, quando l'utente ricopre un elemento, voglio applicare un bordo diverso (1px tratteggiato in grigio). Lo stato iniziale è "1px solido bianco". Ho una classe chiamata "highlight" che ha semplicemente "border: 1px dashed gray" in essa. Voglio aggiungere la classe onmouseover e rimuoverla su onmouseout ma non riesco a ottenere l'effetto che desidero a meno che non utilizzi! Importante nella classe "highlight".

Answer 1

Sembra che il javascript funzioni bene così com'è, ma è solo un problema con lo specificity of your CSS rules, che è il motivo per cui lo !important funziona.

Devi solo rendere le tue regole css evidenziate più specifiche delle regole non evidenziate.

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

---

Modifica con ulteriori spiegazioni:
Diciamo che le parti pertinenti del vostro HTML simile a questa:

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

e hai questo CSS:

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

Attualmente, tutte le voci dell'elenco nello ul in #someItem div avrà un bordo bianco e nulla ha la classe highlight quindi niente è grigio.

con qualsiasi mezzo che si desidera (nel tuo caso un evento hover in jQuery), si aggiunge una classe per una delle voci:

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

Il codice HTML sarà ora essere simile a questa:

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

Finora, Javascript e HTML funzionano correttamente, ma non vedi un bordo grigio! Il problema è il tuo CSS. Quando il browser sta tentando di decidere come stile l'elemento, esamina tutti i diversi selettori che hanno come target un elemento e gli stili definiti in quei selettori. Se ci sono due diversi selettori che definiscono lo stesso stile (nel nostro caso, il colore del bordo è contestato), allora deve decidere quale stile applicare e quali ignorare. Lo fa per mezzo di ciò che è noto come "Specificità" - cioè, quanto è specifico un selettore. Come indicato nello HTML Dog article, lo fa assegnando un valore a ciascuna parte del selettore e quello con il punteggio più alto vince. I punti sono:

• selettore di elementi (ad esempio: "ul", "li", "tavolo") = 1 punto
• selettore di classe (es: "EVIDENZA", ".active",". del menu ") = 10 punti
• selettore di ID (ad esempio: "#someItem", "#mainContent") = 100 punti

ci sono alcune più regole, per esempio: la parola !important e anche stili inline, ma questo è per lo più irrilevante per questo, uhh ... "lezione". L'unica altra cosa che dovresti sapere è che se due selettori hanno la stessa specificità, vince quella definita in seguito nel file.

Tornando al tuo problema, dato il CSS che avevamo prima, possiamo vedere perché è ancora non ha un bordo grigio:

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

Come accennato in precedenza, la soluzione è quella di creare un selettore più specifico:

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

E per rispondere alla tua domanda nei commenti, non c'è bisogno di cambiare le tue JavaScript o HTML per far funzionare tutto questo.Se si spezza giù che il selettore, quello che sta dicendo è:

Cercare l'elemento con ID "someItem", all'interno di quello sguardo per un elemento ul, e poi un elemento li che ha la classe di "highlight" su di esso .

... e ora, data la semplice .addClass() chiamata che hai fatto in precedenza, i li soddisfa queste condizioni, in modo che il confine devono girare grigio.

Answer 2

Sto indovinando che si sta utilizzando uno stile in linea sull'elemento per lo stile iniziale:

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

Ciò sovrascrivere gli stili applicati utilizzando una classe ... Così, invece di utilizzare gli stili inline, solo utilizzare una classe iniziale diversa per applicare gli stili iniziali:

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

... 

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

Answer 3

Avete considerato un approccio css puro?

Ad esempio:

someClass { 
    border: 1px solid white; 
} 

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

La classe hover pseudo vi darà il comportamento che si desidera: quando l'utente sta moused sopra l'elemento, userà lo stile più bassa, altrimenti userà il primo stile .

Nota: come qualcuno ha commentato, questo non funziona per gli elementi non a in IE. Funziona comunque per me in Chrome, Firefox, Safari e Opera.

Funziona anche per qualsiasi elemento in modalità standard IE8 e IE7. Non ho IE6 per testare però.

Answer 4

Questo è un esempio di un hover ho usato:

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


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

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

non si ha realmente bisogno di rompere qualcosa questo semplice fino in funzioni separate.

Sospetto che il tuo problema potrebbe riguardare un conflitto nel css: prova ad applicare la tua classe di evidenziazione eseguendo l'hardcode o con un clic e verifica se funziona davvero.

Speranza che aiuta

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

faccio di solito in questo modo. (consente più opzioni)

Answer 6

Da JQuery 1.3.3 sarete in grado di farlo un po 'più semplice. Ci sarà uno enhanced version of .toggleClass() disponibile che sarà molto potente.

Se non è necessario rompere questo fuori in una funzione poi da 1.3.3 sarete in grado di fare semplicemente:

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

Se hai includere importante allora il vostro punto culminante la classe potrebbe essere più specifica (vedi CSS Specificity).

Answer 7

Oppure si può semplicemente farlo con un semplice CSS utilizzando:

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