使用 JSS 从父元素访问子元素

Question

我正在尝试使用 JSS 来实现这种行为。

.thumbnail:hover+.title {
  display: block;
}

这是一个使用 ID 而不是类的示例： https : //codepen.io/Pixelizm/pen/ICpKv/

编辑：我想我不清楚。 我想使用 CSS-in-JS 重新创建上面的代码片段和 codepen。 ( https://material-ui.com/customization/css-in-js/# )

编辑 2：我感谢所有的反馈。 问题不是关于 ID 与类，而是关于 JSS。 我找到了答案，它在评论中。 谢谢你们。

Answer 1

这应该有效。

'& + .title': {
  display: 'block'
}

希望能帮助到你！

Answer 2

在 CSS 中，类选择器是一个以句号 ( . ) 开头的名称，而 ID 选择器是一个以哈希字符 ( # ) 开头的名称。 以下更改将起作用。

<a class="thumbnail" href="#">
  <img src="http://dummyimage.com/150x150/0066ff/fff">
</a>
<div id="title">filename.jpg</div>

.thumbnail {
  display: block;
  width: 150px;
  height: 150px;
}

.thumbnail:hover+#title {
  display: block;
}

#title {
  display: none;
  color: #ffffff;
  background-color: #000000;
  text-align: center;
  width: 130px;
  padding: 10px;
}

Answer 3

这是它与类一起工作

https://codepen.io/anon/pen/oyJQoM

<a class="thumbnail" href="#"><img src="http://dummyimage.com/150x150/0066ff/fff"></a>
<div class="title">filename.jpg</div>

CSS：

.thumbnail {
    display: block;

    width: 150px;
    height: 150px;
}

.thumbnail:hover + .title {
    display: block;
}

.title {
    display: none;

    color: #ffffff;
    background-color: #000000;
  text-align: center;

  width: 130px;
  padding: 10px;
}