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 に答える