包含带焦点输入的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选择器

回答

相关问题