使div淡出文本区域的焦点

Question

我有一个div，当点击/聚焦某个文本区域时，我想使用JavaScript淡出它。这可能吗？

文本区域HTML

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

div的HTML我想淡出

<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;
}

Answer 1

试试这个：

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

它将两个事件绑定到文本区域，一个绑定到focus事件，一个连接到blur事件。http://jsfiddle.net/FzmW2/

如果不希望它重新淡入，请删除.blur部分。

Answer 2

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