Показать информацию о наведении SCSS / CSS

Question

Я создаю hoverable ul, который отображает элемент p в другом div.

Поскольку в чистом CSS нет родительского селектора, я застрял и не могу понять, как это должно работать.

Fiddle не работает по какой-то причине (для меня), так что вот бин:

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

Мои лучшие усилия были:

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

при попытке нацелиться на родственника

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>