如果悬停表单或单击输入框，jQuery 应用动画

Question

我正在尝试将不透明效果应用于整个表单，当鼠标悬停在整个表单上或在鼠标悬停时单击输入框，以便效果不会消失。

目前我有以下 html:

<form id="search">
    <input id="search-input" type="text" value="Search" />
    <input id="search-submit" type="submit" value="" />
</form>

还有这个 jQuery:

$('form#search').hover(function() { 
    $(this).stop().animate({"opacity": 1}); 
},function() { 
    $(this).stop().animate({"opacity": 0.6}); 
});

目前，它仅在您结束时有效，如果鼠标在屏幕上的其他位置时单击 #search-input 则无效，我如何添加这最后一部分？

这对于 CSS3 是不可能的，因为当没有父选择器而只有一个输入被聚焦时，您不能将不透明度影响应用于整个表单。

伪代码最终目标

$($('form#search').hover(), $('form#search input').focus()).functionOn(){
    $('form#search').stop().animate({"opacity": 1}); 
}, functionOff(){
    $('form#search').stop().animate({"opacity": 0.6}); 
});

Answer 1

为什么不尝试仅在 CSS3 中执行此操作？您可以使用 :hover 和 :focus 来完成。