在悬停 SCSS/CSS 上显示信息答案

【问题标题】：Display info on hover SCSS/CSS在悬停 SCSS/CSS 上显示信息
【发布时间】：2018-10-16 16:40:31
【问题描述】：

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

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

Fiddle 出于某种原因（对我而言）不起作用，所以这里有一个 bin：

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

我最大的努力是：

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

在尝试定位同级 div 时

【问题讨论】：

您将需要 javascript 来使用该标记执行您想要的操作。 #aboutPata 不是 li 的兄弟。
由于页面加载和技能组合而试图避免编写脚本。
那么使用纯 CSS 和那个标记是不可能的。正如你已经知道的 CSS 没有父选择器
请在问题本身中包含所有需要的代码。不要让我们去场外寻找标记等重要部分。你最好的选择是minimal reproducible example 在它自己的问题中。使用编辑器中的<> 按钮添加交互式sn-p。
投反对票？人们是否也会因为链接到小提琴而遭到否决？？？

标签： css sass css-selectors parent siblings

【解决方案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>

【讨论】：

我正在处理这个问题。一旦我让它工作，将标记为答案
使用它在完全解决后创建了三倍的标记..，但它起作用了。有一天他们会实现一个父选择器......我不会屏住呼吸。
三倍的标记？听起来像是重新审视那个 js 选项的理由。它可能会比额外的标记更轻，并且更具可扩展性。现在您有理由扩展该技能组合了
@Ja-oonSolo 太棒了！你能接受正确的答案吗？谢谢！
按原样，代码不起作用，但这是朝着正确方向迈出的一步。我的ul 需要为每个li 显示对应的内容，而不是单个myPCont。 + 选择器以 ~ 结束。