在悬停 SCSS/CSS 上显示信息

Question

我正在制作一个可悬停的ul，在另一个div中显示p元素。

由于纯CSS中没有父选择器，所以我被困住了，无法弄清楚这应该如何工作。

由于某种原因，小提琴不起作用(对我来说(，所以这里有一个垃圾箱：

https://jsbin.com/yohapudimo/edit?html,css,output

我最大的努力是：

#infoDrop > li:hover ~ #aboutPara > p{
display: inline;
}

在尝试定位兄弟姐妹div 时

Answer 1

我认为没有JS可能是可能的...这是未经测试的，所以请耐心等待 - 它也必须是相邻的元素，我不确定这对你来说是否是一个问题？

如果这对你不起作用，那么恐怕你需要 JS。

#myPCont p {
display: none;
color: #fff;
}
.myCont:hover+#myPCont p {
display: block;
}
#myPCont {
background: #333;
height: 300px;
width: 300px;
}

<div class="myCont">
<ul class="hoverShowP">
<li>This is my first list item</li>
<li>This is my second..</li>
<li>And this is my third.</li>
</ul>
</div>
<div id="myPCont">
<p>Heyooo!</p>
</div>