焦點問題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不透明度

回答

相關問題