讓一個div淡出文本區域的焦點

-1

我有一個div，當某個文本區域被點擊/關注時，我希望使用JavaScript淡出。這可能嗎？讓一個div淡出文本區域的焦點

文本區域HTML

<label for="message">Message:</label> 
    <textarea name="message" id="message" wrap="physical" 
     placeholder="What's on your mind?"> 
    </textarea>

HTML的DIV我想淡出

<div id="bubble"> 
    <img src="images/hire_me_bubble.png" alt="Hire me" /> 
</div>

CSS氣泡

#bubble{ 
    width:201px; 
    height:189px; 
    position:absolute; 
    left:416px; 
    top:300px; 
    z-index: 99; 
    overflow:visible; 
}

來源

2012-09-03 Francesca

究竟你不知道該怎麼辦？指定要使用哪個元素？處理點擊元素？淡化元素了嗎？ –

我試過使用我當前的淡入/淡出JavaScript用於網站的另一個區域（當用戶滾動過去某個點時，會出現div）但我不知道如何去識別它當textarea作爲開始JavaScript的事件焦點時。 – Francesca

@Mat - 我甚至不知道這是否可能，一開始，因此我的含糊查詢。我已經使用了一些淡入淡出的JavaScript，但我不知道如何指定它來觸發文本區域的焦點，如果這甚至是可能的話。 – Francesca

$('#message').bind('focus', function(){ 
    $('#bubble').fadeOut(); 
});

來源

2012-09-03 20:25:57

我試過這個，但似乎無法做到它可以工作。任何想法，我可能會出錯？ www.jamesperrett.co.uk/testsite – Francesca

試試這個：

$("#message").focus(function() { 
    $("#bubble").fadeOut(); 
}).blur(function() { 
    $("#bubble").fadeIn(); 
});

它結合兩個事件到textarea的，一到focus事件，而一到blur事件。 http://jsfiddle.net/FzmW2/

如果您不希望它淡入，請刪除.blur部件。

來源

2012-09-03 20:26:09 ThoKra

+1另外請注意，當單擊textarea時不必處理點擊事件，因爲無論如何都會觸發focus。 –

你能告訴我，是否需要將氣泡div與textarea放在同一個div中？我無法正常工作。現場網站是www.jamesperrett.co.uk/testsite，可以在聯繫表單部分查看bubble/textarea。 – Francesca

我給你的代碼是通過ID訪問textarea和div，所以它們可以在文檔中的任何位置。但是，當我使用Chrome對其進行測試時，它似乎確實起作用。 – ThoKra

讓一個div淡出文本區域的焦點

回答

相關問題