Доступ к скрытым элементам ширины и высоты

Question

Я пытаюсь получить доступ к ширине и высоте подконтекстного меню. Они имеют стиль display: none, пока не наведены на родительский элемент. Структура выглядит следующим образом:

const Parent = styled.div`
    p{
      display:none;
    }
    &:hover{
        p{
           display:block;
           width: 200px;
           height:250px;
           overflow:auto; 
        }
    }
`
class ParentComponent extends {Component}{
    state={}

    menuRef = React.createRef(); 

    render(){
       return(
         <Parent>
           <Child menuRef={menuRef}>
         </Parent>

       )
    }
}

Поскольку элемент не отображает ни одного при загрузке, он показывает offsetWidth и offsetHeight как 0. Должен ли я перейти к onMouseEnter и onMouseLeave и контролировать стиль наведения? Или есть лучший способ сделать это?

Answer 1

попробуйте использовать

visibility: hidden

вместо использования дисплея

Answer 2

вы можете попробовать

opacity: 0

вместо

display: none