jQuery CSS Opacity on focus issue

我有一个包含导航项的div，以及一个文本输入（将用作搜索栏）。当用户将鼠标悬停在导航div 上时，使用 CSS 的不透明度从 0.6 变为 1，然后在用户将鼠标移开时再次变为 1。

我想使用 CSS 或 jQuery 将不透明度保持在 1 如果搜索输入处于焦点中，无论用户是否将鼠标悬停在导航栏上。我尝试使用一个简单的if函数（我对jQuery的了解不是很好）：

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

这可能在搜索输入首次聚焦时附加的意义上起作用，但我想一旦用户将鼠标从导航div 移开，CSS 可能会覆盖它？

有什么建议吗？

编辑：通过使用jQuery来控制导航栏div的悬停不透明度，我几乎已经完成了这项工作，但是我如何设置一个jQuery函数来检测导航栏搜索输入是否不在焦点中？

有一个

CSS选择器:focus你可以用它代替jQuery：

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

这消除了对任何JavaScript的需求。

你很接近，但试试这个：

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

你也可以使用 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);
});

工作中的 jsfiddle

更多信息在这里： jQuery fadeTo（）

相关内容