CSS懸停以展開輸入框並暫停以允許輸入

我想了解如何將鼠標懸停在搜索圖標上，然後展開允許用戶輸入一些詳細信息的輸入框。到目前爲止，我已找到一個css解決方案爲懸停，但它似乎並沒有工作。有一個更好的方法嗎？請幫忙。CSS懸停以展開輸入框並暫停以允許輸入

這是的jsfiddle https://jsfiddle.net/amosangyongjian/xzo0kaj5/

這是HTML/CSS似乎並不工作

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

來源

2016-10-20 JianYA

你想在搜索圖標懸停上顯示一個文本框？ – Geeky

是的，然後不關閉，如果當我輸入文字 – JianYA

的〜選擇器，只有當它被第一先於第二元件相匹配。爲了使這個工作，你可以把輸入後的跨度在HTML中。我認爲你可能會發現只有使用css才能達到這個目的有其侷限性，更好的選擇可能是使用js來應用這個類來顯示輸入，以便你有更多的控制權。我添加了一些額外的css選擇器（.search：hover，.search：focus）來克服我看到的一些問題。

.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"/>

與jQuery的處理基本例如：

$('.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"/>

來源

2016-10-20 22:50:03 Kenji

嗨！謝謝回覆。 jquery選項會是什麼樣子？我打開它，但我不太熟悉jquery – JianYA

我添加了一個非常基本的例子來回答。真的，這一切都取決於你想如何工作。 – Kenji

你.searchicon:hover~.search查詢不工作，因爲它選擇的是由之前的每.search元素.searchicon:hover個元素。在你的情況下，.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，所以如果你想保持你應該使用JavaScript來實現這一點，HTML結構：如果您的跨度標籤後移動輸入文本，這樣

的影響將被觸發。

來源

2016-10-20 22:54:36 gamboa

CSS懸停以展開輸入框並暫停以允許輸入

回答

相關問題