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无法做到这一点，因为只有输入被聚焦时才能将不透明度效果应用于整个表单，因为没有父选择器。

Pseduo Code最终目标

$($('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。

Answer 2

代码应该可以很好地完成工作。如果有人在当前正在编辑输入时将其鼠标移出，这也会处理，如果您正在编辑输入，然后单击进入另一个“可淡化”div，它应该正确转换到新的“fadeable”div。

唯一缺少的是你的动画，但我认为你可以将addClass / removeClass更改为你的动画，你应该好好去。

这需要一些时间，所以希望它有所帮助！

http://jsfiddle.net/vpz2S/

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

2 个答案: