焦点问题jQuery CSS不透明度

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

我想要使用CSS或jQuery来保持不透明度为1，如果搜索输入焦点在于用户是否悬停在导航栏上。我一直在使用一个简单的IF函数（我的jQuery的知识是不是很大）尝试：

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

这可能工作在这个意义上，当搜索输入首先专注于它是附加的，但我想作为用户移动鼠标离开导航div时，CSS可能会重写那个？

有什么建议吗？

编辑：我几乎得到了这个工作，通过使用jQuery来控制navbar div的悬停不透明度，但是如何设置一个jQuery函数来检测navbarsearch输入是不是焦点？

来源

2012-11-22 Godge

这是在一个事件处理程序中，对吗？ –

你接近，但试试这个：

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

来源

2012-11-22 09:41:36

编辑：实际上，运行之后，当用户将鼠标悬停在导航栏上时，它将停止悬停css不透明度。这是我使用的CSS： #navbar：hover {opacity：1; } 也许我应该使用jQuery呢？ – Godge

这是正确的，CSS'：hover'伪选择器具有非常明显的跨浏览器兼容性。 [查看更多信息]（http://www.quirksmode.org/css/contents.html） –

我已经设法通过使用jQuery来控制导航栏上的悬停不透明度。谢谢 – Godge

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

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

这消除了任何JavaScript的需要。

来源

2012-11-22 09:42:38 Kyle

供参考：[IE7不支持'：focus']（http://www.quirksmode.org/css/contents.html） –

是的，你是对的。感谢您添加:)。如果OP需要IE7 <支持然后诉诸jQuery。 – Kyle

我已经尝试过，但不幸的是它不起作用，我认为当用户将鼠标移出导航栏时，控制导航栏不透明度的css将覆盖此css – Godge

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

Working jsfiddle

此处了解详情：jQuery fadeTo()

来源

2012-11-22 09:46:39 chris

这是行不通的:( – Godge

刚刚更新与工作jsfiddle – chris

这工作，但没有在我工作的上下文，对不起。 – Godge

焦点问题jQuery CSS不透明度

回答

相关问题