在 React 中创建悬停效果菜单答案

【问题标题】：Creating a Hover effect Menu in React在 React 中创建悬停效果菜单
【发布时间】：2017-09-20 08:05:46
【问题描述】：

我需要制作一个滑出式菜单，类似于这些图片中的那个：

编辑：我尝试使用 css，但我的侧边栏不会显示，这是我的 css 代码：

.SideBar{
position: absolute;
left: -80px;
transition: 0.4s;
width: 80px;
font-size: 15px;
color: white;
transition: 0.3s

} .SideBar:hover{ left: 0; }

【问题讨论】：

显示你的代码，你尝试了什么，有什么问题？
我实际上没有尝试过任何事情，我真的不知道如何处理手头的话题，你能指出我正确的方向吗？

标签： html css reactjs

【解决方案1】：

使用 OnHover，然后什么时候悬停，改变状态。更改状态后，您可以使用条件。

类似这样的：

render() {
    return (
        <div>(this.state.isHovered) ? (<a>openedmenu</a>) :(<a onHover={this.hover.bind(this)}>closed menu</a>)</div>
     )
}


hover() {
this.setState({isHovered:true})
}

然后你就可以自己试验了

【讨论】：

谢谢，我会继续查找更多信息