Как изменить стиль элемента/контейнера, когда фокус находится «внутри» него?

Question

Предположим, у вас есть такой код:

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

Теперь предположим, что у меня есть что-то подобное (это просто пример) для каждого элемента формы.Я хотел бы изменить стиль с notSelected на Selected, когда:

• Фокус пользователя на элементе ввода
• Пользователь наводит указатель мыши на элемент div notSelected.

Когда он меняет фокус, выбранный div должен снова стать невыбранным.

Я хотел бы сделать что-то подобное, чтобы увеличить размер текста выбранного div.В любом случае было бы здорово внести и другие изменения, поэтому я бы предпочел изменить атрибут класса.

Как лучше всего сделать что-то подобное в JavaScript?Есть ли какой-либо JavaScript-фреймворк, который мог бы помочь мне в этом?Так что будет легко добавлять эффекты, такие как затухание и т. д.

Я скачал MooTools, но, быстро прочитав документацию, я не увидел, как это сделать, не имея определенного идентификатора для любого из элементов div форм, но я использую его впервые.У меня нет проблем с использованием любого другого фреймворка, но если вы предложите его, пожалуйста, напишите также, на что мне конкретно следует обращать внимание.

Answer 1

Я бы порекомендовал взглянуть на jQuery для вашей задачи.Его довольно легко освоить, и он быстро дает хорошие эффекты.Но одного только описанного вами эффекта, чистого JavaScript тоже будет достаточно.

Сделайте так, чтобы ваши DIV всегда имели класс под названием «выбираемый».Позже вы сможете переключить другие классы CSS.Создайте класс CSS с именем «выбранный» и придайте ему желаемый вид.

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

Затем добавьте что-то вроде этого в раздел сценариев вашего документа:

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

Это непроверено, поэтому может быть сбой, но это даст вам общее представление, с чего начать.

P.S:Изменение размера текста при перемещении мыши, возможно, не лучшая идея.Это приводит к изменению макета страницы, что раздражает пользователя.

Answer 2

Существует также чистое решение этой проблемы с помощью CSS.Однако это не работает в MSIE 6.Технически оно работает аналогично решению Томалека, но вместо использования JavaScript для переключения класса элемента он использует CSS для переключения его стиля:

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

Answer 3

@Томалак:

Почему вы запрашиваете DOM четыре раза?

Небольшое изменение, но огромная выгода в скорости:

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

Answer 4

Это несколько не связано, но тег метки не заключает в себе входной тег.Вы присваиваете тегу метки атрибут for, который соответствует идентификатору входного элемента.Пример,

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

Answer 5

Еще один ответ, не имеющий отношения к исходному вопросу, но...jQuery также имеет альтернативный синтаксис для выполнения операций наведения/наведения курсора мыши, называемый наведением.

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

Пример,

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

Извините за эти двойные $, я не могу понять, как этого избежать.