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

这是与类一起使用

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;
}

Answer 2

这应该有效。

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

希望有帮助！

Answer 3

在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;
}

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

3 个答案: