Как скрыть и показать другие элементы, сосредоточившись на других элементах, таких как панель поиска Stackoverflow.com?

Question

Я делаю сайт, на котором размер полей ввода для имени и адреса электронной почты не очень большой из-за дизайна

Итак, я хочу знать, как скрыть другие элементы: сфокусироваться и вернуться снова после того, как не в фокусе.

Как это

Я хочу сделать фокус и для мыши, и для клавиатуры

Редактировать

Я видел тот же эффект, что и я, в баре Seach на Stackoverflow.com

Как у них дела?

Answer 1

http://jsfiddle.net/tBQpB/6/

в чистом виде:

.wrapper{
    width:400px;
    position:relative
}
input{
    position:relative;
    z-index:1;
}
input:focus{
    position:absolute;
    z-index:2;
    width:400px;
    float:left;
    left:0px
}

и html:

<div class="wrapper">
        <input type="text" id="name" name="name" />

        <input type="text" id="email" name="email" />
</div>

Answer 2

Я написал некоторый код в jsFiddle для этой проблемы ...

Проверьте это: http://jsfiddle.net/ycdrR/1/

Обновление: http://jsfiddle.net/ycdrR/4/

Answer 3

вы можете попробовать что-то в javascript, например,

$("input").focus(function()
                 {
                     var currentSelectedInput=this;

                     $("input").each(function()
                                     {
                                     if(this!=currentSelectedInput)
                                         $(this).parent().hide();
                                     });
                     $(this).css("width","100%");
                 });

$("input").blur(function(){
    $("input").each(function()
                                     {
                                         if($(this).parent().is(":visible")){
                                             $(this).css("width","auto");
                                         }
                                         else{
                                         $(this).parent().show();
                                         }
                                     });
                 });

, используя jquery для вышеупомянутого, и разметка выглядит следующим образом:

<div style="width="500px">
<div id="name" style="float:left">

    Name:
    <input  type="textbox" />
        </div>
    <div id="email" style="right">      
Email:
            <input type="textbox" />
    </div>
</div>