Wie der Stil eines Elements / Behälter ändern, wenn der Fokus „innen“ oder?

Question

Nehmen wir einen Code wie diese haben:

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

Jetzt nehme ich an so etwas wie dieses haben (es ist nur ein Beispiel) für jedes Element eines Formulars. Ich mag den Stil von notSelected ändern zu ausgewählten wenn:

• Benutzer Fokus auf das Eingabeelement
• Benutzer die Maus über einen notSelected div
bewegen

Als er das gewählte div wurde wieder notSelected sollte sich ändern.

Ich mag so etwas tun, um die Größe des Textes des ausgewählten div zu erhöhen. Auf jeden Fall könnte es sein, kühl macht andere Änderungen auch so würde ich es vorziehen, das Klassenattribut zu ändern.

Was ist der beste Weg, so etwas in JavaScript zu tun? Gibt es eine JavaScript-Framework, das mir tut dieses Ding steigern kann? So wird es leicht sein, Effekte hinzufügen wie Fading etc ...

Ich heruntergeladen MooTools aber mit einem schnell den Dokumenten gelesen habe ich nicht sehen, wie dies zu tun, ohne eine spezifische ID für eine der Formen div zu haben, aber ist das erste Mal, dass ich es verwenden. Ich habe kein Problem, andere Framework, aber wenn Sie eine vorschlagen, bitte auch schreiben, was soll ich für speziell aussehen.

Answer 1

Ich würde einen Blick auf jQuery für Ihre Aufgabe empfehlen. Es ist ganz einfach zu erlernen und schöne Effekte schnell produziert. Aber Ihr beschriebener Effekt allein wäre reiner JavaScript auch genug sein.

Machen Sie Ihre DIVs haben immer eine Klasse namens „wählbar“. Sie können später auf andere CSS-Klassen wechseln. Erstellen Sie eine CSS-Klasse mit dem Namen „ausgewählt“ und gibt ihnen das gewünschte Aussehen.

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

Dann, so etwas zu dem Skripten Abschnitt des Dokuments hinzuzufügen:

$(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");
    }
  );
});

Dies ist nicht getestet, so könnte es ein Glitch drin sein, aber es wird Ihnen die allgemeine Idee geben, wo zu beginnen.

P. S: Ändern der Textgröße auf Mausbewegung möglicherweise nicht die beste aller Ideen. Es führt zu dem Seitenlayout neu anordnen, die für den Benutzer lästig ist.

Answer 2

Es gibt auch eine reine CSS-Lösung für dieses Problem. Es ist jedoch nicht in MSIE 6 Technisch funktioniert, funktioniert es ähnlich wie Tomalek-Lösung, sondern JavaScript des Verwendens des Elements Klasse zu wechseln, es nutzt CSS seinen Stil zu wechseln:

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

Answer 3

@Tomalak:

Warum abfragen Sie den DOM viermal?

Ein kleiner bearbeiten, aber ein großer Geschwindigkeitsvorteil:

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

Answer 4

Dies ist etwas nicht verwandtes, aber der Label-Tag umschließen nicht den Input-Tag. Sie geben das Label-Tag ein „für“ Attribut, das auf die ID des Eingangselementes entspricht. Beispiel:

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

Answer 5

Noch ein weiterer unabhängige-to-the-original-Frage Antwort, aber ... jQuery hat auch eine alternative Syntax für das Tun Mouseover / mouseout Sachen genannt schweben.

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

Beispiel:

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

Sorry für diese Doppel $ 's, ich kann nicht scheinen, um herauszufinden, wie das zu entkommen.