0

当鼠标悬停在鼠标悬停时或单击输入框时，我试图将不透明度效果应用于整个表单，这样效果不会消失。

目前我有以下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}); 
});
4

2 回答 2

4

您为什么不尝试仅在 CSS3 中执行此操作？您可以使用 :hover 和 :focus 来做到这一点。

于 2012-05-09T00:39:47.027 回答
2

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

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

这花了一些时间，所以希望它有所帮助！

http://jsfiddle.net/vpz2S/

于 2012-05-09T01:57:49.970 回答