Assegnare effetto Hover e focus con jquery

[Alifuma92]

Ciao a tutti! sto provando ad assegnare ad una textbox degli stili diversi per l'effetto hover e focus.

Questo è il mio HTML dove alla pressione di un bottone vengono assegnati gli stili alla textbox "#prova"

<input type="text" id="prova">

<button onclick="prova()">Assegna gli stili</button>

Questa è la funzione prova

function prova(){
        $("#prova").css("background-color","red");
    $("#prova").focus(function() {        $(this).css("background-color","yellow");    });    $("#prova").hover(function() {        $(this).css("background-color","blue");    });    $("#prova").mouseout(function() {        $(this).css("background-color","red");    });
}

Gli stili vengono assegnati, ma non ottengo lo stesso risultato come se scrivessi gli stili nel tag <style></style>

come in questo modo...
#prova{background-color:red;}
#prova:focus{background-color:yellow;}
#prova:hover{background-color:blue;}

C'è un modo per assegnare dinamicamente questi stili senza creare conflitti tra le pseudoclassi???

Grazie!

[cavicchiandrea]

Gli stili vengono assegnati, ma non ottengo lo stesso risultato come se scrivessi gli stili nel tag <style></style> Quali sono le differenze?
C'è un modo per assegnare dinamicamente questi stili senza creare conflitti tra le pseudoclassi??? Che conflitti riscontri?

[Alifuma92]

allora ho fatto una prova... ho creato due textbox:
alla prima assegno gli stili in maniera statica inserendoli nell'head del documento: così:
#prova2{background-color:red;}
#prova2:focus{background-color:yellow;}
#prova2:hover{background-color:blue;}

alla seconda invece assegno gli stessi stili, ma tramite jquery (funziona prova() che ho postato sopra).

In teoria il risultato delle due textbox deve essere il medesimo, pero non è così.
ora elenco differenze ed uguaglianze tra le due textbox.

La textbox a cui ho applicato gli stili tramite l'head ha il seguente comportamento ("presumo quello corretto"):
-sfondo rosso per lo stato di default
-al passaggio sopra del mouse, ma senza cliccare lo sfondo diventa blu
-se dò il focus e lascio il mouse all'interno lo sfondo è sempre blue
-se esco dalla textbox col mouse, ma il focus è attivo diventa giallo
-se clicco all'esterno della textbox torna rosso (come da default).

La textbox a cui ho applicato gli stili tramite jQuery ha questo comportamento ("presumo sbagliato"):
-sfondo rosso per lo stato di default
-al passaggio sopra del mouse, ma senza cliccare lo sfondo diventa blu
-se dò il focus e lascio il mouse all'interno lo sfondo è giallo (invece che blu)
-se esco dalla textbox col mouse, ma il focus è attivo diventa rosso (invece che giallo)
-se clicco all'esterno della textbox torna rosso (come da default).

Ho contrassegnato le differenze con il grassetto e sottolineo... probabilmente sbaglio nell'assegnazione degli stili nella funzione prova()... pero non so come uscirne...

[Vindav]

potresti fare cosi:

hover = false;
focus = false;
$("#idbutton").click(function(){
  $("#prova").css("background-color","red");
  
  $("#prova").focus(function() {        
   if(!hover) $(this).css("background-color","yellow");   
   focus = true;
}); 
  
  $("#prova").focusout(function() {        
   if(!hover) $(this).css("background-color","red"); 
    focus = false;
  }); 
  
  $("#prova").hover(function() {        
   $(this).css("background-color","blue"); 
   hover=true;    
  });    
  
  $("#prova").mouseout(function() {        
    if(!focus) $(this).css("background-color","red");   
    else $(this).css("background-color","yellow");
    hover=false;
  });
});

fai attenzione che modificando l'ordine delle istruzioni css cambia anche il comportamento della textbox, l'ultima istruzione ha sempre la precedenza, infatti come tu hai detto "se dò il focus e lascio il mouse all'interno lo sfondo è sempre blue" se inverti le ultime due righe del css invece vedrai che "se dò il focus e lascio il mouse all'interno lo sfondo è giallo (invece che blu)".

[Alifuma92]

ottima soluzione! grazie Vindav!

[Alifuma92]

continuo qui la discussione tra focus e mousedown().
E ma vorrei per quanto riguardo mousedown e focus che avvenisse il tuttto come se assegnassi le pseudoclassi active e focus da css... Il risultato non è lo stesso. Con le pseudoclassi lo vedo il verde del mousedown anche al primo click

[Alifuma92]

Tenendo pigiato il tasto del mouse senza rilasciarlo dovrei vedere il verde e mollandolo dovrei vedere il giallo...

[Vindav]

usa mouseup al posto di focus

[Alifuma92]

ottima idea.. ho sostituito il focus con il mouseup e giocando con la variabile focus settata a true. Funziona! l'unica cosa che il focus partirà al rilascio del mouse e non alla pressione, ma poco importa è una differenza di qualche millisecondo! l'effetto è quello che volevo!