关于焦点问题的jQuery CSS不透明度答案

【问题标题】：jQuery CSS Opacity on focus issue关于焦点问题的jQuery CSS不透明度
【发布时间】：2012-11-10 16:11:03
【问题描述】：

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

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

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

这可能是因为它在第一次关注搜索输入时被附加，但我猜一旦用户将鼠标从导航 div 上移开，CSS 可能会覆盖它？

有什么建议吗？

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

【问题讨论】：

【解决方案1】：

你已经接近了，但试试这个：

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

【讨论】：

编辑：实际上，在运行之后，当用户将鼠标悬停在导航栏上时，它会停止悬停 css 不透明度的工作。这是我正在使用的 CSS：#navbar:hover { opacity: 1;也许我也应该为此使用 jQuery？
没错，CSS :hover 伪选择器的跨浏览器兼容性很差。 See more info here
我已经设法通过使用 jQuery 来控制导航栏上的悬停不透明度来实现这一点。谢谢

【解决方案2】：

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

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

这消除了对任何 javascript 的需要。

【讨论】：

【解决方案3】：

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

【讨论】：