Como mudar o estilo de um elemento/contêiner quando o foco está "dentro" dele?

Question

Suponha ter um código como este:

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

Agora, suponha que eu tenha algo assim (é apenas um exemplo) para cada elemento de um formulário. Eu gostaria de mudar o estilo de não selecionado para selecionado quando:

• Foco do usuário no elemento de entrada
• Usuário move o mouse sobre uma div não selecionada

Quando ele muda o foco, a div é não selecionada novamente.

Eu gostaria de fazer algo assim para incrementar o tamanho do texto da div. De qualquer forma, pode ser legal fazer outras alterações também, então eu prefiro alterar o atributo de classe.

Qual é a melhor maneira de fazer algo assim em JavaScript? Existe alguma estrutura JavaScript que possa me impulsionar para fazer isso? Portanto, será fácil adicionar efeitos como desbotamento etc ...

Baixei Mootools, mas com uma leitura rápida dos documentos, não vi como fazer isso sem ter um ID específico para nenhum dos formulários Div, mas é a primeira vez que o uso. Não tenho nenhum problema em usar qualquer outra estrutura, mas se você sugerir um, escreva também o que devo procurar especificamente.

Answer 1

Eu recomendaria uma olhada no jQuery para sua tarefa. É muito fácil aprender e produz efeitos bons rapidamente. Mas o seu efeito descrito sozinho, JavaScript puro também seria suficiente.

Faça seus divs sempre ter uma classe chamada "selecionável". Você pode alternar outras classes CSS posteriormente. Crie uma classe CSS chamada "selecionada" e dê a aparência desejada.

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

Em seguida, adicione algo assim à seção Scripts do seu 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");
    }
  );
});

Isso não é testado, para que possa haver uma falha nele, mas dará a você a idéia geral por onde começar.

PS: Alterar o tamanho do texto no movimento do mouse pode não ser o melhor de todas as idéias. Isso leva a reorganizar o layout da página, o que é irritante para o usuário.

Answer 2

Há também uma solução CSS pura para esse problema. No entanto, ele não funciona no MSIE 6. Tecnicamente, funciona semelhante à solução de Tomalek, mas em vez de usar o JavaScript para alternar a classe do elemento, ele usa CSS para alternar seu estilo:

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

Answer 3

@Tomalak:

Por que você está consultando o DOM quatro vezes?

Uma pequena edição, mas um enorme benefício de velocidade:

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

Answer 4

Isso não tem relação, mas a tag de etiqueta não inclui a tag de entrada. Você fornece à tag de etiqueta um atributo "para", que corresponde ao ID do elemento de entrada. Exemplo,

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

Answer 5

Mais uma resposta não relacionada à pergunta original, mas ... o jQuery também tem uma sintaxe alternativa para fazer coisas de mouseover/mouseout chamadas hover.

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

Exemplo,

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

Desculpe por aqueles $ 's, não consigo descobrir como escapar disso.