我可以在CSS中选择以前的兄弟吗？

Question

我想选择#btnsrchicon父母的孩子#txtSearch。我想在下面的格式，但不工作

HTML

<div id="topSearch"> 

<input id="txtSearch" name="search" type="text" value="" id="txtSearch" onClick="ClearTextBox()" onkeypress="searchenter(event);"/> 
<button id="btnsrchicon" class="submit" onClick="search_another();"></button> 

</div> 

和CSS

<style> 
#txtSearch{display:none;} 
#btnsrchicon:hover < #topSearch+#txtSearch 
{ 
display: block; 
border:2px solid red; 
} 
</style> 

Answer 1

CSS不提供这种解决方案。

你可以做什么是一个JavaScript的解决方案，当用户将鼠标悬停ELEM：

$('#btnsrchicon').prev('#txtSearch').addClass('yourClass') 

类似的东西：

$('#btnsrchicon').hover(function(){ 
 
    $(this).prev('#txtSearch').addClass('show'); 
 
}, function(){ 
 
    $(this).prev('#txtSearch').removeClass('show'); 
 
});

#txtSearch{ 
 
    display:none; 
 
} 
 

 
#txtSearch.show { 
 
display: block; 
 
border:2px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="topSearch"> 
 
    <input id="txtSearch" name="search" type="text" value="" id="txtSearch" onClick="ClearTextBox()" onkeypress="searchenter(event);"/> 
 
    <button id="btnsrchicon" class="submit" onClick="search_another();">Button</button> 
 
</div>

编辑：另一个解决方案

#txtSearch{ 
 
    display:none; 
 
} 
 

 
#btnsrchicon:hover + #txtSearch 
 
{ 
 
display: block; 
 
border:2px solid red; 
 
}

<div id="topSearch"> 
 

 
<button id="btnsrchicon" class="submit" onClick="search_another();">Button</button> 
 
<input id="txtSearch" name="search" type="text" value="" id="txtSearch" onClick="ClearTextBox()" onkeypress="searchenter(event);"/> 
 

 
</div>

...你用CSS调整位置。

Answer 2

CSS中没有父选择器。但是你可以选择一个下面的兄弟姐妹。一种可能的解决办法是改变button和input的顺序和使用+选择，这样的：

#btnsrchicon:hover + #txtSearch { 
 
    display: block; 
 
} 
 

 
#txtSearch { 
 
    display: none; 
 
}

<button id="btnsrchicon" class="submit" onClick="search_another();">Bouton</button> 
 
<input id="txtSearch" name="search" type="text" value="" id="txtSearch" onClick="ClearTextBox()" onkeypress="searchenter(event);"/>

然后，如果顺序是非常重要的，你可以使用一些css在视觉上恢复顺序