使用從搜索圖標彈出的搜索框創建 CSS 下拉菜單

Question

我正在創建一個 CSS 懸停下拉菜單。 我有一個搜索圖標，上面也有一個懸停。 當您將鼠標懸停在圖標上時，它會下拉搜索輸入。 但是，當鼠標移出該區域時，搜索框就會消失。 只要光標在輸入字段內，或者輸入被聚焦，就希望將框保持在那里。

如果你需要我發布我剛剛讓我知道的內容，但基本上就是這個帶有標准的純 CSS 懸停下拉菜單，這是基本的 HTML 設置：

<li class="search">
    <ul class="search">
        <li><input placeholder="enter search" action=""></li>

所以它可以工作，但正如我在您離開時所說的那樣，即使光標閃爍，它也會再次隱藏。 我假設我需要某種 JavaScript 來完成這項工作，但不確定從哪里開始。

Answer 1

您可以使用 JavaScript 在li添加和刪​​除一個類。 下面的代碼雖然是在jQuery 。

        $( ".search" ).onmouseenter( function() {
            $( "input" ).addClass( "seeMe" ).focus();
        });

        $( "input" ).blur( function() {
            $( this ).removeClass( "seeMe" );
        });

這使得輸入可見並在您懸停搜索li時為其提供焦點，並在輸入失去焦點時隱藏。

在我的jsFiddle上查看修改后的版本。

Answer 2

純 CSS 解決方案

JavaScript 不需要這樣做。 使用純 CSS。 我將使用O作為搜索圖標。 我還為元素添加了邊框，用於可視化它們的碰撞框。

查看此答案底部的進一步閱讀部分以獲得更多說明。

解決方案

 .search { list-style: none; padding: 0; width: fit-content; border: 1px solid black; /*border added to visualise collision box*/ } .search-bar { display: none; } .search-icon { width: fit-content; border: 1px solid red; /*border added to visualise collision box*/ } .search-icon:hover+.search-bar { display: block; } .search-bar:hover { display: block; }

 <ul class="search"> <li class="search-icon">O</li> <li class="search-bar"><input placeholder="enter search" action=""></li> </ul>

動畫解決方案

 .search { list-style: none; padding: 0; width: fit-content; border: 1px solid black; /*border added to visualise collision box*/ } .search-bar { opacity: 0; width: 0; overflow: hidden; transition: all 200ms ease-in; } .search-icon { width: fit-content; border: 1px solid red; /*border added to visualise collision box*/ } .search-icon:hover+.search-bar { opacity: 1; width: 100px; } .search-bar:hover { opacity: 1; width: 100px; }

 <ul class="search"> <li class="search-icon">O</li> <li class="search-bar"> <input placeholder="enter search" action=""> </li> </ul>

進一步閱讀

• 查看CSS Selectors - Combinators ，
• 子組合器&
• MDN 上的相鄰兄弟組合器