入力ボックスを広げて入力を許可するためにCSSをホバーする

Question

検索アイコンの上にマウスを置いて、入力ボックスを拡大してユーザが詳細を入力できるようにする方法を学ぼうとしています。ホバーのために、それは動作していないようです。これを行うより良い方法はありますか？助けてください。

これはjsfiddle https://jsfiddle.net/amosangyongjian/xzo0kaj5/

である。これは

<input type="text" class="search"/> 
<span class="searchicon"><i class="fa fa-search"></i></span> 

.search{ 
    display:none; 
    width:0; 
    transition: width 2s; 
} 

.searchicon:hover~.search{ 
    display:block; 
    width:197px; 
} 

Answer 1

を動作していないようなHTML/CSSです〜セレクタは、それが最初に先行されている場合にのみ、第二の要素にマッチします。この作業を行うには、htmlの範囲の後に入力を入れることができます。私はあなたがこれを達成するためにCSSを使用することがその限界を持っていることがわかるかもしれないと思う、より良い選択肢は、より多くのコントロールを持つように入力を表示するためにjsを使用してクラスを適用することがあります。私はいくつかの追加のCSSセレクタ（.search：hover、.search：focus）を追加して、私が見た問題のいくつかを克服しました。 jQueryを使って処理するための

.search{ 
 
    width:0; 
 
    visibility: hidden; /* display property wasn't working with transition */ 
 
    transition: width 2s; 
 
    float: left; 
 
} 
 

 
.searchicon:hover~.search, .search:hover, .search:focus{ 
 
    visibility: visible; 
 
    width:197px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" rel="stylesheet"/> 
 
<span class="searchicon"><i class="fa fa-search"></i></span> 
 
<input type="text" class="search"/>

Basicの例：

$('.searchicon').hover(function() { 
 
    $('.search').addClass('show'); 
 
});

.search{ 
 
    width:0; 
 
    visibility: hidden; /* display property wasn't working with transition */ 
 
    transition: width 2s; 
 
    float: left; 
 
} 
 

 
.show { 
 
    visibility: visible; 
 
    width:197px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" rel="stylesheet"/> 
 
<span class="searchicon"><i class="fa fa-search"></i></span> 
 
<input type="text" class="search"/>

Answer 2

それがが先行しているすべての.search要素を選択しますので、あなたの.searchicon:hover~.searchクエリが動作していません.searchicon:hover要素。あなたの場合、は.searchに先行しているので、うまくいきません。

<span class="searchicon"><i class="fa fa-search"></i></span> 
<input type="text" class="search"/> 

There is no a previuous sibling selector in CSSので、あなたはそのHTML構造を維持したい場合は、これを達成するためにJavaScriptを使用する必要があります：あなたはspanタグの後に入力されたテキストを移動する場合

効果はこのように、トリガされます。