Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94

    onmousenter e onmouseleave

    Ciao.

    Ho creato una lista (li element) che agisce da filtro di categorie.
    Ogni volta che clicco su un li (ognuno corrisponde ad una diversa categoria) i corrispondenti marker su su una mappa vengoni visualizzati (filtrati).

    Tutto funziona perfettamente.

    1) Clicco su un elemento, questo prende un classe (toggleClass) che lo rende visivamente diverso dagli altri per capire che � la categoria attiva (sfondo del li verde)

    2) Subito dopo parte una funzione che tra le altre cose aggiunge tramite append() l'icona check

    3) Altre cose.

    Volevo aggiungere un ulteriore tocco:

    Quando passo il mouse su un determinata categoria "attiva" (a cui ci� � stata aggiunta la classe del punto 1) vorrei che al posto dello sfondo verde ci sia lo sfondo rosso e che al posto dell'icona check ci sia l'icona close.

    Questo passaggio l'ho fatto nel modo seguente (e funziona) ma rimane un bug che non riesco a sistemare:

    codice:
    $(".filtri li.filterON").on("mouseenter", function(){
          $(".fa-check", this).hide();
          $(".fa-times", this).show();
          $(this).attr("style", "background-color:#E05848 !important");
     })
     $(".filtri li.filterON").on("mouseleave", function(){
          $(".fa-check", this).show();
          $(".fa-times", this).hide();
          $(this).css("background-color", "");
      })
    Il problema � che quando un elemento perde la classe interessata (toggleClass punto 1) quando passo il mouse sopra viene eseguito lo stesso il codice qui sopra. Eppure nel selettore c'� scritto filterON quindi non dovrebbe eseguirlo.

    Ricapitolando:
    1) All'inizio nessun <li> ha la classe attiva.

    2) Qunado clicco su uno diventa attivo perch� gli viene aggiunta la classe

    3) Solo sulla categoria attiva quando passo il mouse (hover) il <li> cambia colore di sfondo e cambia icona

    4) Se tolgo il mouse il <li> torna allo stato originario ovvero con sfondo verde e icona check

    5) PUNTO CRUCIALE Quando clicco nuovamente sullo stesso elemento, questo perde la classe e quindi non � pi� attivo... Ritorna allo stato iniziale ma appena ripasso sopra col mouse riparte il mouseenter che non dovrebbe essere eseguito in quanto non ha pi� la class attiva.

    E' solo il punto 5 che si comporta in modo anomalo perch� per il resto funziona tutto.

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao, personalmente ti consiglierei di risolvere via CSS senza scomodare troppo JavaScript; da quel che vedo, mi pare si possa risolvere molto facilmente con qualche :hover e altre due regole messe in croce. Nel caso, prova a postare il codice HTML relativo a quella roba o postare un link alla pagina pubblica, per capire come e dove poter intervenire.

    Il problema del tuo jQuery e dato dal fatto che non c'è alcun riferimento alla toggleClass da te menzionata (da quel che mi pare di capire). In tal caso dovresti fare un controllo su tale classe, magari mettendo una condizione o usando un metodo del tipo $(this).hasClass("toggleClass"), da inserire dentro le funzioni, oppure, meglio ancora, creare una delegazione (basata per l'appunto su tale classe) direttamente per quegli eventi.

    Ma, ripeto, forse una soluzione CSS è più semplice e pulita, sempre che sia possibile.
    Ultima modifica di KillerWorm; 22-06-2017 a 01:55
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94
    Ciao KillerWorm, grazie mille per la risposta, e per quelle date in altri post.

    Si avevo riportato solo il pezzo di codice (quello riportato sopra) perchè era quello incriminato.. la classe veniva aggiunta ad un event click prima.

    Avevo tentato anche la strada del css ma non avevo ottenuto risultati.. andando a memoria avevo tentato un filterON:hover ma stranamente non funzionava.. ci avevo perso un pomeriggio a cercare una soluzione ma niente da fare.. eppure deve essere proprio qualche stupidata.. In pratica quando clicchi per la seconda volta sullo stesso elemento, questo perde giustamente la classe filterON (diventa un semplice li senza background-color) ma per qualche strana ragione quando ripasso sopra col mouse quel pezzo di codice riparte e quindi scatta il background-color e l'icona close (eppure non ha più la classe).

    Mi rendo conto che se non si vede il codice è difficile capire... ora non ho le forze di andare a recuperare il codice (vengo da una dura giornata)

    Magari appena trovo un momento libero lo posterò.

    Per intanto grazie lo stesso.

    Saluti.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.