隱藏懸停兄弟DIV與CSS僅

Question

我感興趣的是CSS（不需要JavaScript）的方式炫耀div或一個你:hover以外的元素，像這樣：

#divid { 
 
    display: none; 
 
} 
 
a:hover #divid { 
 
    display: block; 
 
}

<a href="#">Hover me!</a> 
 
<div id="divid">Hello there, fellow friend!</div>

我很好奇，因爲我想在鼠標懸停某個菜單元素的時候創建一個東西，您將會在瀏覽器的左邊緣找到搜索欄（它會是position: fixed;）。

---

編輯：

上面的代碼實際上並沒有whatI想要的，我想。

這是實際的代碼，因爲它無法解決答案。

#fixed2 a:hover + .nav { 
 
    background: black; 
 
} 
 
#options:hover + #search_text { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
}

<ul class="nav"> 
 
    <li id="left" class="big"> 
 
    <a href="#"> 
 
     <img width="35px" src="square.png" /> 
 
    </a> 
 
    </li> 
 
    <li id="left" class="arrow"> 
 
    <a href="#"> 
 
     <img src="arrow.png" /> 
 
    </a> 
 
    </li> 
 
    <li id="left"> 
 
    <a href="#"> 
 
     <img width="17px" style="margin-left: -7px" src="refresh.png" /> 
 
    </a> 
 
    </li> 
 
    <li id="left"> 
 
    <a href="#"> 
 
     <img width="18px" style="opacity: 0.94; margin-top: -1px;" src="help.png" /> 
 
    </a> 
 
    </li> 
 
    <div id="fixed"> 
 
    <li id="search"> 
 
     <form action="" method="get"> 
 
     <input type="text" name="search_text" id="search_text" placeholder="Search" /> 
 
     <input type="button" name="search_button" id="search_button"> 
 
     </form> 
 
    </li> 
 
    </div> 
 
    <div id="fixed2"> 
 
    <li class="icn" id="options"> 
 
     <a href="#"> 
 
     <img width="25px" src="settings.png" /> 
 
     </a> 
 
    </li> 
 
    </div> 
 
</ul>

爲什麼它不正常工作，只是實際工作？

Answer 1

UPDATE你與你當前的標記CSS想要的東西，你無法實現，因爲CSS沒有父CSS選擇器，檢查Is there a CSS parent selector?，所以兩個選項：

• 通過JS做到這一點
• 更改當前標記的方式這是會懸停並徘徊是兄弟元素（如以前的例子，我的回答如下）

---

可以使用adjacent sibling selector+

#divid { 
 
    display: none; 
 
} 
 
a:hover + #divid { 
 
    display: block; 
 
}

<a href="#">Hover me!</a> 
 
<div id="divid">Hello there, fellow friend!</div>

，如果你有他們之間的一個額外的兄弟姐妹，你可以使用general sibling selector~這是不太嚴格

#divid { 
 
    display: none; 
 
} 
 
a:hover ~ #divid { 
 
    display: block; 
 
}

<a href="#">Hover me!</a> 
 
<div id="sibling">I'm sibling too</div> 
 
<div id="divid">Hello there, fellow friend!</div>

Answer 2

編輯： 使用CSS選擇器之間的加號，你實際上是在說：

1. 當你徘徊上述<a>
2. 目標最接近/兄弟div。
3. 使用您的設置，您只能在使用javascript時移動目標元素。
4. 它可以不是完成。

顯示，當事情打破：

我故意添加#divid和<a>之間<p>標籤。現在我正在嘗試將最接近的元素定位到#divid，這應該是<a>但它不是。所以我的CSS休息。

#divid { 
 
    display: block; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 
a:hover + #divid { 
 
    position: absolute; 
 
    display: block; 
 
    top: 20px; 
 
    left: 20px; 
 
}

<a href="#">Hover me!</a> 
 
<p> 
 
P tag is in the way. 
 
</p> 
 
<div id="divid">Hello there, fellow friend!</div>

片段走動元素：

你需要尊重CSS選擇器。嘗試將代碼分解爲更小的代碼，然後慢慢地增加越來越多的複雜性。

#divid { 
 
    display: block; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 
a:hover + #divid { 
 
    position: absolute; 
 
    display: block; 
 
    top: 20px; 
 
    left: 20px; 
 
}

<a href="#">Hover me!</a> 
 
<div id="divid">Hello there, fellow friend!</div>

段：

#divid { 
 
    display: none; 
 
} 
 
a:hover + #divid { 
 
    display: block; 
 
}

<a href="#">Hover me!</a> 
 
<div id="divid">Hello there, fellow friend!</div>