[英]How to display div element on hover another element using css-in-js?
I'm trying to display some information only on hover to special div.我试图仅在 hover 上将一些信息显示到特殊 div。 I'm using material ui and their withStyles component.我正在使用材质 ui 及其 withStyles 组件。 Is there a way to do that?有没有办法做到这一点?
Please check this example:请检查这个例子:
import React, {useState} from "react";
export default function ShowButtonHover() {
const [style, setStyle] = useState({display: 'none'});
return (
<div className="App">
<h2>Hidden message in the box. Move mouse in the box</h2>
<div style={{border: '1px solid gray', width: 300, height: 300, padding: 10, margin: 100}}
onMouseEnter={e => {
setStyle({display: 'block'});
}}
onMouseLeave={e => {
setStyle({display: 'none'})
}}
>
<div style={style}>This was hidden</div>
</div>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.