Форма li background change

Я пытаюсь добиться эффекта тега li, изменяющего цвета фона, когда пользователь фокусируется на вводе (эффект можно увидеть в нижней части страницы here. От просмотра похожих вопросов это похоже на . не может быть сделано в чистом CSS, поэтому мне было интересно, как сделать это в JQuery (у меня нет знаний) Вот мой HTML:Форма li background change

<form class="contact-form" action="" method="post" name="contact-form"> 
     <ul> 
      <li> 
       <input type="text" name="name" placeholder="NAME" class="test"/> 
      </li> 
      <li> 
       <input type="email" name="email" placeholder="EMAIL" /> 
      </li> 
      <li> 
       <textarea name="message" name="message" placeholder="MESSAGE"></textarea> 
      </li> 
      <li> 
       <button class="submit" type="submit">Send</button> 
      </li> 
     </ul> 
    </form>

источник

2013-02-12 vytfla

Кроме того, возможно дубликат: http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child –

@vytfla взглянуть на мой ответ, включает эффект затухания из приведенного примера. – AbstractChaos

@AbstractChaos Я считаю, что чего-то не хватает. У меня есть в теге , за которым следует ваш код в

Вы можете использовать: селектор парения в вашем CSS заявление; нет необходимости в JS вообще ..

.contact-form ul li { background-color:#000000; } 
.contact-form ul li:hover { background-color: #C0C0C0; }

источник

2013-02-12 00:25:32

Это не поддерживается в IE 6 и 7. –

Человек, о котором я не думал, это полезная и хорошая альтернатива. Благодарю. – vytfla

@htmled yeah ... вы, скорее всего, правы. Я прекратил поддержку IE6 и IE7 около 2 лет назад. –

Heres базовая версия JQuery, который активирует в центре внимания, как, например

$('.contact-form').on('focus','input,textarea',function() { 
    $('.contact-form li').animate({'backgroundColor':'#00FF00'}); 

    $(this).parent().animate({'backgroundColor':'#FF0000'}); 
});

fiddle

источник

2013-02-12 00:33:36 AbstractChaos

Смежные вопросы