Доступ к дочернему элементу из родительского элемента с использованием JSS - PullRequest
Новая
       9

Доступ к дочернему элементу из родительского элемента с использованием JSS

0 голосов
/ 29 июня 2018

Я пытаюсь добиться такого поведения с помощью JSS. 

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

Вот пример использования идентификаторов вместо классов: https://codepen.io/Pixelizm/pen/ICpKv/

Редактировать: я думаю, что я неясно. Я хочу воссоздать приведенный выше фрагмент кода и кодовую ручку, используя CSS-in-JS. (https://material -ui.com / настройка / CSS-в-JS / # )

Редактировать 2: Я ценю все отзывы. Вопрос был не об идентификаторах против классов, а о JSS. Я нашел ответ, и это в комментариях. Спасибо всем.

Ответы [ 3 ]

0 голосов
/ 29 июня 2018

Это должно работать. 

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

Надеюсь, это поможет!

0 голосов
/ 29 июня 2018

В CSS селектор класса - это имя, перед которым стоит точка («.»), А селектор идентификатора - это имя, перед которым стоит хеш-символ («#»). Нижеследующее изменение будет работать. 

<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;
}
0 голосов
/ 29 июня 2018

Вот оно работает с классами

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