jquery - フォーカスの問題に関するjQuery CSSの不透明度

Question

テキスト入力 (検索バーとして使用されます) とともに、ナビゲーション項目を含む div があります。ユーザーがナビゲーション div にカーソルを合わせると、CSS を使用して不透明度が 0.6 から 1 に変化し、ユーザーがマウスを離すと再び不透明度に戻ります。

ユーザーがナビゲーションバーにカーソルを合わせているかどうかに関係なく、検索入力にフォーカスがある場合は、CSS または jQuery を使用して不透明度を 1 に保ちたいと考えています。単純な if 関数を使用してみました (jQuery の知識はあまりありません)。

if ($("#navsearchbox").is(":focus")){
  $("#navbar").css('opacity', '1');
}

これはおそらく、検索入力が最初にフォーカスされたときに追加されるという意味で機能しますが、ユーザーがマウスをナビゲーション div から離すとすぐに、CSS がそれを上書きするのではないでしょうか?

助言がありますか？

編集: jQuery を使用して navbar div のホバーの不透明度を制御することで、これをほぼ機能させましたが、navbarsearch 入力がフォーカスされていないかどうかを検出する jQuery 関数を設定するにはどうすればよいですか?

score 4 · Accepted Answer

:focusjQuery の代わりに使用できるCSS セレクターがあります。

#navsearchbox:focus #navbar
{
    opacity: 1;
}

これにより、JavaScript が不要になります。

score 2 · Accepted Answer

あなたは近いですが、これを試してください：

$("#navsearchbox").focus(function(event){
  $("#navbar").css('opacity', '1');
}).blur(function(event){
  $("#navbar").css('opacity', '0.5');
});

score 0 · Accepted Answer

また、fadeTo() jquery 関数を使用できますか?

HTML

<input type="text" id="myField" value="Here is some">

CSS

#myField {
    opacity:0.5;
}

jQuery

$("#myField").focus(function(event){
    $(this).fadeTo('slow', 1);
}).blur(function(event){
    $(this).fadeTo('slow', 0.5);
});

詳細はこちら：jQuery fadeTo()

3 に答える 3