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

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, когда:

• внимание пользователя на входном элементе
• пользователя переместить курсор мыши на notSelected ДИВ

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

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

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

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

Answer 1

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

У вас всегда есть класс под названием «selectable». В дальнейшем вы можете переключать другие классы CSS. Создайте класс CSS с именем «selected» и придайте ему желаемый вид.

<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. Технически, это работает аналогично решению Tomalek, но вместо того, чтобы использовать JavaScript, чтобы переключить класс элемента, он использует CSS, чтобы переключить его стиль:

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

Answer 3

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

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

Answer 4

@Tomalak:

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

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

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

Answer 5

Еще один несвязанный-к-оригинал-вопрос ответ, но ... JQuery также имеет альтернативный синтаксис для ведения/MouseOut курсора, находящихся вещей называемый зависанием.

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

Пример,

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

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