#reactjs #styled-components
Вопрос:
Мне нужна помощь с наведением курсора в стилизованных компонентах. Если наведение находится в компоненте и влияет на этот компонент, это работает. Но если наведение находится в компоненте и влияет на другой компонент, не работает.
Выпадающее содержимое не отображается при выпадающем списке:наведите курсор.
export const DropDownLi = styled(StyledLi)` display: inline-block; amp;:hover { color: red; } `; export const DropDownContent = styled.div` display: none; position: absolute; min-width: 160px; z-index: 1; ${DropDownLi}:hover amp; { display: block; } /* not show on hover */ `; Не работает в следующем примере.
export const DropDownLi = styled(StyledLi)` display: inline-block; amp;:hover ${DropDownContent} { color: red; } `; lt;StyledUlgt; lt;DropDownLigt;$ Currencylt;/DropDownLigt; lt;DropDownContentgt;dvsdvlt;/DropDownContentgt; lt;DropDownLigt;Englishlt;/DropDownLigt; lt;StyledLigt;Loginlt;/StyledLigt; lt;/StyledUlgt; Ответ №1:
Попробуйте удалить amp; :
export const DropDownContent = styled.div` display: none; position: absolute; min-width: 160px; z-index: 1; ${DropDownLi}:hover { display: block; } /* not show on hover */ `; Комментарии:
1. Спасибо @Georgy за помощь, но без нее не обойтись
amp;.2. ах, я вижу, вы хотите показать родительский компонент, если наведете курсор на дочерний компонент, верно? Я не уверен, что вы могли бы сделать это с помощью CSS. Каскадирование работает с верхних уровней на нижние.
3. Я обновил вопрос, чтобы вы могли видеть. Я хочу показать дочерний компонент (
DropDownContent) при наведении на другой дочерний компонент (DropDownLi). Мне нужен раскрывающийся список со стилизованными компонентами. Спасибо вам за помощь.
Ответ №2:
Я нашел решение этой проблемы. Код, который работает, приведен ниже.
lt;StyledUlgt; lt;DropDownLigt; $ Currency lt;DropDownContentgt;dvsdvlt;/DropDownContentgt; lt;/DropDownLigt; lt;/StyledUlgt; export const StyledLi = styled.li` float: left; cursor: pointer; `; export const DropDownContent = styled.div` display: none; position: absolute; min-width: 160px; z-index: 1; `; export const DropDownLi = styled(StyledLi)` display: inline-block; `; export const StyledUl = styled.ul` list-style-type: none; margin: 0; overflow: hidden; color: black; ${DropDownLi}:hover gt; ${DropDownContent} { display: block; } `;