我可以在CSS中選擇以前的兄弟嗎？

-1

我想選擇#btnsrchicon父母的孩子#txtSearch。我想在下面的格式，但不工作我可以在CSS中選擇以前的兄弟嗎？

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>

來源

2017-07-07 ManiMuthuPandi

這是不可能的:( –

你的意思是以前的兄弟選擇器？你的按鈕元素沒有任何子元素 – TylerH

是的，以前的兄弟 – ManiMuthuPandi

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調整位置。

來源

2017-07-07 13:11:11

哦傷心;我是在CSS中試用 – ManiMuthuPandi

@ManiMuthuPandi你可以在你的按鈕之前定位並使用選擇器。我會編輯我的答案。 –

@ManiMuthuPandi編輯 –

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在視覺上恢復順序

來源

2017-07-07 13:20:44

好想法;但文本框應該先顯示，然後按鈕 – ManiMuthuPandi

您可以使用css在視覺上更改順序（具有行反轉或列反轉的絕對位置的柔性盒，...） –

我可以在CSS中選擇以前的兄弟嗎？

回答

相關問題