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 来控制导航栏 div 的悬停不透明度，我几乎已经完成了这项工作，但是如何设置一个 jQuery 函数来检测导航栏搜索输入是否不在焦点上？

score 4 · Accepted Answer

有一个 CSS 选择器:focus可以用来代替 jQuery：

#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