Как material ui реализовать данную конструкцию css

Question

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}


.section:hover .layer {
  border: 2px solid #F90;
}```
**Делаю так:**
```const useStyles = makeStyles({
  cellForEditWrapper: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    '&:hover .cellIconForEdit': {
      opacity: 1,
    },
    
  },

  cellIconForEdit: {
    opacity: 0,
  },
}); ```

Может кто подскажет, буду благодарен.
Смысл, что при наведении на один элемент показывается другой.

Answer 1

Не знаю, можно ли так делать в jss, но суть в том, что с помощью символов наподобие '+', '>', '~' в селекторах можно при взаимодействии с одним элементом обращаться к другому. Например:

.first {

}

.second {
    display: none;
}

.first:hover + .second {
    display: block;
}

В данном случае при наведении на элемент .first будет отображаться .second.(элементы соседние) Почитайте получше про соседние, дочерние и родственные селекторы в css. http://htmlbook.ru/css/selector/ Очень надеюсь, что это Вам поможет.

БЛОГ НА HUSL

Как material ui реализовать данную конструкцию css

Ответы (1 шт):