隐藏悬停兄弟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>