Visualizzazione dei risultati da 1 a 2 su 2

Discussione: onmousenter e onmouseleave

  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    44

    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
    3,538
    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; Oggi a 01:55
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

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 © 2017 vBulletin Solutions, Inc. All rights reserved.