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

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>

       )
    }
}

由于元素在加载时显示 none，因此显示 offsetWidth 和 offsetHeight 为 0。我是否必须转到 onMouseEnter 和 onMouseLeave 并控制悬停样式？或者有更好的方法吗？

Answer 1

尝试使用

visibility: hidden

而是使用显示

Answer 2

你可以试试

opacity: 0

而不是

display: none

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

Access hidden elements width and height

javascript

css

ref

reactjs