Form li背景更改

我试图实现当用户关注输入时，更改背景颜色的li标记的效果（效果可以在页面底部看到here。从看到类似的问题看起来像是这样。不能在纯CSS来完成，所以我想知道如何做到这一点的jQuery的（我不知道）这是我的HTML：Form li背景更改

<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 – 2013-02-12 00:20:49

@vytfla看看我的答案，包括来自给出示例的衰落效应。 – AbstractChaos 2013-02-12 10:12:52

@AbstractChaos我相信我错过了一些东西。我在我的标记“> vytfla 2013-02-12 18:19:05

这里是如何做到这一点它会添加背景颜色。到具有焦点的表单字段的父LI，并且在退出该字段后，背景颜色将被移除。

Working example on jsFiddle。

CSS：

.selected { 
    background: lightYellow; 
}

jQuery的：在你的CSS语句悬停选择;：

$(function() { 
    var $form = $(".contact-form"), 
     selectedClass = "selected"; 

    $form.on("focus", "input, textarea", function() { 
     $(this).closest("li") 
      .addClass(selectedClass); 
    }); 

    $form.on("blur", "input, textarea", function() { 
     $(this).closest("li") 
      .removeClass(selectedClass); 
    }); 
});

来源

2013-02-12 00:21:09

可以使用无需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. – 2013-02-12 02:34:42

男人我没有想到，这是有用的，很好的选择。谢谢。 – vytfla 2013-02-12 06:11:39

@htmled是啊...你很可能是对的。大约两年前我停止支持IE6和IE7。 – 2013-02-12 22:14:08

继承人基本的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

Form li背景更改

回答

相关问题