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无法提供此解决方案。

当用户悬停elem时，你可以做的是一个javascript解决方案：

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

类似的东西：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：另一种解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

...然后用CSS调整位置。

Answer 2

CSS中没有父选择器。但您可以选择以下兄弟姐妹。可能的解决方案可能是更改button和input的顺序，并使用+选择器，如下所示：

＆＃13;

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

＆＃13;

<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);"/>

＆＃13;

然后，如果订单非常重要，您可以使用某些css直观地还原订单

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

2 个答案: