Come cambiare lo stile di un elemento / contenitore quando lo stato attivo è & # 8220; all'interno di & # 8221; vero?

Question

Supponi di avere un codice come questo:

<div class="notSelected">
      <label>Name
          <input type="text" name="name" id="name" />
      </label> 
      <div class="description">
          Tell us what's your name to make us able to fake to be your friend 
          when sending you an email.
      </div>
</div>

Ora supponiamo che io abbia qualcosa del genere (è solo un esempio) per ogni elemento di un modulo. Vorrei cambiare lo stile da notSelected a Selected quando:

• Focus dell'utente sull'elemento di input
• L'utente sposta il mouse su un div notSelected

Quando cambia focus, il div Selected non dovrebbe più essere nuovamente selezionato.

Mi piacerebbe fare qualcosa del genere per aumentare le dimensioni del testo del div selezionato. Ad ogni modo, potrebbe essere bello fare anche altre modifiche, quindi preferirei cambiare l'attributo class.

Qual è il modo migliore per fare qualcosa del genere in JavaScript? Esiste un framework JavaScript che può aiutarmi a fare questa cosa? Quindi sarà facile aggiungere effetti come lo sbiadimento, ecc ...

Ho scaricato MooTools ma con una lettura veloce dei documenti non ho visto come farlo senza avere un ID specifico per nessuno dei moduli div, ma è la prima volta che lo uso. Non ho problemi ad usare nessun altro framework, ma se ne suggerisci uno, per favore scrivi anche cosa dovrei cercare nello specifico.

Answer 1

Consiglierei jQuery per il tuo compito. È abbastanza facile da imparare e produce rapidamente effetti piacevoli. Ma l'effetto descritto da solo, sarebbe sufficiente anche JavaScript puro.

Rendi i tuoi DIV sempre dotati di una classe chiamata " selezionabile " ;. In seguito puoi attivare o disattivare altre classi CSS. Crea una classe CSS denominata " selezionata " e dagli l'aspetto desiderato.

<div class="selectable">  (=off) vs. <div class="selectable selected"> (=on)

Quindi aggiungi qualcosa di simile alla sezione script del tuo documento:

$(document).ready(function(){

  // handle mouseover and mouseout of the parent div
  $("div.selectable").mouseover(
    function() { 
      $(this).addClass("selected").addClass("mouseIsOver");
    }
  ).mouseout(
    function() { 
      $(this).removeClass("selected").removeClass("mouseIsOver");
    }
  );

  // handle focus and blur of the contained input elememt,
  // unless it has already been selected by mouse move
  $("div.selectable input").focus(
    function() {
      $(this).parents("div.selectable").not(".mouseIsOver").addClass("selected");
    }
  ).blur(
    function() {
      $(this).parents("div.selectable").not(".mouseIsOver").removeClass("selected");
    }
  );
});

Non è stato testato, quindi potrebbe esserci un problema tecnico, ma ti darà l'idea generale da dove iniziare.

P.S: la modifica della dimensione del testo con lo spostamento del mouse potrebbe non essere la migliore di tutte le idee. Porta a riordinare il layout della pagina che è fastidioso per l'utente.

Answer 2

Esiste anche una soluzione CSS pura a questo problema. Tuttavia, non funziona in MSIE 6. Tecnicamente, funziona in modo simile alla soluzione di Tomalek ma invece di utilizzare JavaScript per attivare / disattivare la classe dell'elemento, utilizza CSS per attivare il suo stile:

.selectable { /* basic styles …  */ }
.selectable:hover { /* hover styles … */ }
.selectable:active { /* focus styles … */ }

Answer 3

@Tomalak:

Perché stai interrogando il DOM quattro volte?

Una piccola modifica, ma un enorme vantaggio in termini di velocità:

$("div.selectable").mouseover(function ()
{
    // ...
}).mouseout(function ()
{
    // ...
});

Answer 4

Questo è in qualche modo non correlato, ma il tag label non racchiude il tag input. Dai un tag etichetta a " per " attributo che corrisponde all'ID dell'elemento di input. Esempio,

<label for="username">Username</label>
<input type="text" name="username" value="Enter your username..." id="username" />

Answer 5

Ancora un'altra risposta non correlata alla domanda originale ma ... jQuery ha anche una sintassi alternativa per fare cose mouseover / mouseout chiamate hover.

$(element).hover(function(){ /* mouseover */ }, function(){ /* mouseout */ });

Esempio

$('ul#nav li').hover(function() {
    $(this).addClass('highlight');
}, function() {
    $(this).removeClass('highlight');
});

Mi dispiace per quei doppi $, non riesco a capire come sfuggire.