Блог

Главная - Вопросы по программированию - reactjs наведите курсор в соответствующем стиле: раскрывающееся меню

reactjs наведите курсор в соответствующем стиле: раскрывающееся меню

#reactjs #drop-down-menu #styled-components

Вопрос:

 const DropUl = styled.ul`
 width:138px;
 height:124px;
 margin:0px;
 padding:0px;
 background: #FFFFFF;
 border: 2px solid #169DA8;
 box-sizing: border-box;
 border-radius: 4px;
 position: absolute;
 top:55px;

**display:none;
amp;:hover{
 display:block;
 }**

`

const DropLi = styled.li`

  display:block;
  width:106px;
  height:36px;
  position: relative;
  top:10px;
  left:20px;
  
`
const DropAncor = styled.a`
 text-decoration:none;
 font-family: Rubik;
 font-style: normal;
 font-weight: normal;
 font-size: 16px;
 line-height: 150%;
 color: #111111;

<Li parametarWith={'58px'} ><Ancor href="#"> <h5>Saveti</h5></Ancor>
        <DropUl>
          <DropLi><DropAncor href="#">Cesto pitanje</DropAncor></DropLi>
          <DropLi><DropAncor href="#">Veterinar</DropAncor></DropLi>
          <DropLi><DropAncor href="#">Iskustva</DropAncor></DropLi>

        </DropUl>
      </Li>

Вопрос::

Я что сделать выпадающее меню в компоненте стиля на элементе ul при наведении для отображения выпадающего меню блока При наведении на этот пример ничего не происходит, я использую amp;:наведение, но оно не работает

Ответ №1:

Вы можете сделать что-то вроде этого:

 const DropLi = styled.li`
  display: none;
  width: 106px;
  height: 36px;
  position: relative;
  top: 10px;
  left: 20px; 
`

const DropUl = styled.ul`
  width:138px;
  height:124px;
  margin:0px;
  padding:0px;
  background: #FFFFFF;
  border: 2px solid #169DA8;
  box-sizing: border-box;
  border-radius: 4px;
  position: absolute;
  top:55px;

  amp;:hover ${DropLi} {
    display: block;
  }
`

Смотрите документ для получения дополнительной информации!

Метки: