Cómo cambiar el estilo de un elemento / contenedor cuando el foco está & # 8220; dentro de & # 8221; ¿eso?

Question

Supongamos tener un 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>

Ahora suponga que tengo algo como esto (es solo un ejemplo) para cada elemento de un formulario. Me gustaría cambiar el estilo de noSelected to Selected cuando:

• Enfoque del usuario en el elemento de entrada
• El usuario mueve el mouse sobre una división no seleccionada

Cuando cambie el enfoque, el div Seleccionado no debería ser Seleccionado nuevamente.

Me gustaría hacer algo como esto para aumentar el tamaño del texto del div seleccionado. De todos modos, podría ser bueno hacer otros cambios también, así que prefiero cambiar el atributo de clase.

¿Cuál es la mejor manera de hacer algo como esto en JavaScript? ¿Hay algún marco de JavaScript que pueda impulsarme a hacer esto? Así que será fácil agregar efectos como desvanecimiento, etc. ...

Descargué MooTools pero con una lectura rápida de los documentos no vi cómo hacer esto sin tener una identificación específica para cualquiera de los formularios div, pero es la primera vez que lo uso. No tengo ningún problema en utilizar cualquier otro marco, pero si sugiere uno, escriba también qué debo buscar específicamente.

Answer 1

Recomendaría echar un vistazo a jQuery para su tarea. Es bastante fácil de aprender y produce efectos agradables rápidamente. Pero solo con su efecto descrito, el JavaScript puro también sería suficiente.

Haz que tus DIV siempre tengan una clase llamada " seleccionable " ;. Puedes cambiar otras clases de CSS más adelante. Cree una clase de CSS llamada " seleccionada " y dale el look deseado.

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

Luego agregue algo como esto a la sección de scripts de su 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");
    }
  );
});

Esto no se ha probado, por lo que podría haber una falla, pero te dará una idea general de por dónde empezar.

P.S: Cambiar el tamaño del texto en el movimiento del mouse puede no ser la mejor de todas las ideas. Esto lleva a reorganizar el diseño de la página, lo que es molesto para el usuario.

Answer 2

También hay una solución CSS pura para este problema. Sin embargo, no funciona en MSIE 6. Técnicamente, funciona de manera similar a la solución de Tomalek, pero en lugar de usar JavaScript para cambiar la clase del elemento, usa CSS para cambiar su estilo:

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

Answer 3

@Tomalak:

¿Por qué consulta el DOM cuatro veces?

Una pequeña edición, pero un enorme beneficio de velocidad:

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

Answer 4

Esto no está relacionado, pero la etiqueta de la etiqueta no encierra la etiqueta de entrada. Das a la etiqueta de etiqueta un " para " atributo que corresponde al ID del elemento de entrada. Ejemplo,

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

Answer 5

Otra respuesta no relacionada con la pregunta original, pero ... jQuery también tiene una sintaxis alternativa para hacer cosas con el mouseover / mouseout llamadas hover.

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

Ejemplo,

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

Perdón por esos dolares dobles, parece que no consigo descubrir cómo escapar de eso.