css - 在悬停 SCSS/CSS 上显示信息

Question

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

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

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

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

我最大的努力是：

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

在尝试定位兄弟 div 时

标签： csssasscss-selectorsparentsiblings

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>