包含帶焦點輸入的div的CSS選擇器

我在頁面頂部有一個鏈接，當它懸停時，顯示一個搜索菜單。包含帶焦點輸入的div的CSS選擇器

#dropdown { 
 
    display: none; 
 
} 
 

 
li:hover #dropdown { 
 
    display: block; 
 
}

<ul class="nav navbar-nav"> 
 
    <li><a href="">Link 1</a></li> 
 
    <li><a href="">Link 2</a></li> 
 
    <li> 
 
    <a href="">Search</a> 
 
    <div id="dropdown"> 
 
     <input name="txtSearch" type="text" id="txtSearch" class="form-control" /> 
 
     <input type="submit" name="btnSearch" value="Search" id="btnSearch" class="btn" /> 
 
    </div> 
 
    </li> 
 
</ul>

既然有下拉<div>內的文本框，我想的下拉菜單，即使unhovered如果用戶在文本框中鍵入保持可見。

有沒有一種純CSS的方式來做到這一點？

來源

2017-10-10 TheIronCheek

您可以將:focus-within pseudo-class添加到任何父元素。

li:hover #dropdown, 
li:focus-within #dropdown { 
    display: block; 
}

但是，請記住this is not supported in Microsoft browsers。你需要一個基於JavaScript的解決方案。下面是一個使用jQuery的：

$(document).on('focus','#txtSearch,#btnSearch',function(e) { 
 
    $(this).closest('li').addClass('hover'); 
 
}).on('blur','#txtSearch,#btnSearch',function(e) { 
 
    $(this).closest('li').removeClass('hover'); 
 
});

#dropdown { 
 
    display: none; 
 
} 
 

 
li:hover #dropdown, 
 
li.hover #dropdown { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav navbar-nav"> 
 
    <li><a href="">Link 1</a></li> 
 
    <li><a href="">Link 2</a></li> 
 
    <li> 
 
    <a href="">Search</a> 
 
    <div id="dropdown"> 
 
     <input name="txtSearch" type="text" id="txtSearch" class="form-control" /> 
 
     <input type="submit" name="btnSearch" value="Search" id="btnSearch" class="btn" /> 
 
    </div> 
 
    </li> 
 
</ul>

來源

2017-10-10 16:13:36 Blazemonger

這太糟糕了我的大部分用戶使用的是IE，因爲CSS的解決方案是完美的。我很煩，我不得不使用JS。 – TheIronCheek

您可以在這裏使用focus-within僞類。

Info from MDN

Supported browsers

#dropdown { 
 
    display: none; 
 
} 
 

 
li:hover #dropdown { 
 
    display: block; 
 
} 
 

 
#dropdown:focus-within { 
 
    display: block; 
 
}

<ul class="nav navbar-nav"> 
 
    <li><a href="">Link 1</a></li> 
 
    <li><a href="">Link 2</a></li> 
 
    <li> 
 
    <a href="">Search</a> 
 
    <div id="dropdown"> 
 
     <input name="txtSearch" type="text" id="txtSearch" class="form-control" /> 
 
     <input type="submit" name="btnSearch" value="Search" id="btnSearch" class="btn" /> 
 
    </div> 
 
    </li> 
 
</ul>

來源

2017-10-10 16:13:29 sol

包含帶焦點輸入的div的CSS選擇器

回答

相關問題