访问隐藏元素的宽度和高度

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