- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这里是material-ui
的例子https://material-ui.com/utils/popover/#mouse-over-interaction
按照示例 material-ui
的这些步骤 https://material-ui.com/utils/popover/#mouse-over-interaction
在上面的示例中,将鼠标放在文本上 Hover with a Popover.
--- 你看到了 popover
尝试将鼠标移动到 popover
附近 --- popover
消失了吗?但即使我将鼠标悬停在 popover
只有当用户没有将鼠标悬停在popover
或Hover with a Popover
上时,才让弹出窗口消失。(基本上是anchorEl)
我正在从他们的演示中复制代码
import React from 'react';
import PropTypes from 'prop-types';
import Popover from '@material-ui/core/Popover';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
const styles = theme => ({
popover: {
pointerEvents: 'none',
},
paper: {
padding: theme.spacing.unit,
},
});
class MouseOverPopover extends React.Component {
state = {
anchorEl: null,
};
handlePopoverOpen = event => {
this.setState({ anchorEl: event.currentTarget });
};
handlePopoverClose = () => {
this.setState({ anchorEl: null });
};
render() {
const { classes } = this.props;
const { anchorEl } = this.state;
const open = Boolean(anchorEl);
return (
<div>
<Typography
aria-owns={open ? 'mouse-over-popover' : undefined}
aria-haspopup="true"
onMouseEnter={this.handlePopoverOpen}
onMouseLeave={this.handlePopoverClose}
>
Hover with a Popover.
</Typography>
<Popover
id="mouse-over-popover"
className={classes.popover}
classes={{
paper: classes.paper,
}}
open={open}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
onClose={this.handlePopoverClose}
disableRestoreFocus
>
<Typography>I use Popover.</Typography>
</Popover>
</div>
);
}
}
MouseOverPopover.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(MouseOverPopover);
我需要在此处进行哪些代码更改?你可以试验 https://codesandbox.io/s/6l3wk6kv3
最佳答案
我遇到了同样的问题,没有找到任何答案,我花了一段时间才明白如何解决它。
实际上问题来自 pointerEvents:弹出窗口上不需要任何东西来防止同时触发您的 onMouseEnter/onMouseLeave。
但是你可以为你的popover pointerEvents的内容设置:auto。
然后您可以在弹出窗口的内容上添加一个 onMouseEnter 和一个 onMouseLeave。
这是一个更明确的例子:
import React, { useState, useRef } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Popover } from '@material-ui/core';
const useStyles = makeStyles(theme => ({
popover: {
pointerEvents: 'none',
},
popoverContent: {
pointerEvents: 'auto',
},
}));
const MyComponent = ({ loading, login, wrong, clearWrongLogin }: Props) => {
const [openedPopover, setOpenedPopover] = useState(false)
const popoverAnchor = useRef(null);
const popoverEnter = ({ currentTarget }) => {
setOpenedPopover(true)
};
const popoverLeave = ({ currentTarget }) => {
setOpenedPopover(false)
};
const classes = useStyles();
return (
<div>
<span
ref={popoverAnchor}
aria-owns="mouse-over-popover"
aria-haspopup="true"
onMouseEnter={popoverEnter}
onMouseLeave={popoverLeave}
>Hover this el !
</span>
<Popover
id="mouse-over-popover"
className={classes.popover}
classes={{
paper: classes.popoverContent,
}}
open={openedPopover}
anchorEl={popoverAnchor.current}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
PaperProps={{onMouseEnter: popoverEnter, onMouseLeave: popoverLeave}}
>
<div>
My popover content...
</div>
</Popover>
</div>
);
};
export default MyComponent
关于javascript - 如何在悬停在 anchorEl 和 'popover' 上时继续显示 'popover'?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54705254/
这里是 sandbox Antd pop over 正如您在示例中看到的,当您单击任意位置时,popover自动关闭。我想禁用该东西并仅通过单击按钮将其关闭。 我在 Popover 中没有看到这样的选
我在 gridview 更新、排序、分页方面遇到错误。页面加载时,网格通过 AJAX 正常加载。但是,在单击标题对行进行排序或单击任何分页按钮时,我收到一条错误消息: Uncaught Typ
我有一个标准的 Ionic 4 页面(主页),它创建一个使用组件(BusinessDetails)和一个重定向到新页面(RequestTurn)的按钮的弹出窗口。但是,当我单击该按钮时,弹出窗口不会消
我为 bootstrap twitter 库调用了 js 文件,但我得到了指示的错误 $("a[rel=popover]").popover is not a function .
Apple 的“移动人机界面指南”是关于弹出框的: When possible, allow people to close one popover and open a new one with o
如果 .popover() 之后变成 .on('hidden.bs.popover'),我想'销毁'是 .on('shown.bs.popover' 所以它不会再 'show' 。一切似乎都正确,但看
我将 emberjs 与 twitter-bootstrap 一起使用,但只有 css,所以没有从 bootstrap 获取的 javascript。 我想让 popover 工作,它弹出了,但是 p
我正在使用 twitter bootstrap 在社交媒体上分享我的帖子,我创建了一个链接,其弹出窗口带有一些按钮内容,但是当我进一步点击弹出窗口中的按钮时,它们的弹出窗口功能不起作用。 Share
我有一些动态加载到包含弹出窗口的网页上的内容。出于这个原因,我必须将它们绑定(bind)到 body 上,以便它们正确加载和显示。 我想找到一种方法来在用户点击弹出窗口外或另一个弹出窗口触发器时隐
当用户点击弹出窗口外的任何地方时,我试图隐藏 Bootstrap 弹出窗口。 (我真的不确定为什么 Bootstrap 的创建者决定不提供此功能。) 我找到了以下代码 on the web但我真的不明
这里是material-ui的例子https://material-ui.com/utils/popover/#mouse-over-interaction 按照示例 material-ui 的这些步
我在表单中使用 Bootstrap 弹出窗口来显示一些仅适用于某些用户的可选选择。我注意到一个问题,即一旦弹出窗口关闭,表单选择(是或否单选按钮选项)就会丢失,并且 2 个单选按钮的表单输入不包含在表
当popover 出现 时如何显示背景,而当popover 消失 时如何显示背景? $(function(){ var content = 'Pay Now Activation Cod
jsFiddle:http://jsfiddle.net/kAYyR/ 截图: 这是有效的: 点击按钮打开弹出框 在弹出框外点击关闭弹出框 点击 .close 按钮关闭弹出窗口 但是...当您再次单击
当尝试使用此模板在一行中显示弹出窗口时: Here we go: Show me popover with html 并通过添加 CSS 类,例如: myClass { white
首先,问题的 fiddle :jsfiddle.net 我正在使用一个弹出窗口,它的内容是 html,一个类为“click_me”的按钮。我有 jquery 来监听对“click_me”的点击,它应该
当使用弹出窗口API时,我想,当轻关闭发生时,停止弹出窗口关闭,并运行自定义js从屏幕上删除弹出窗口。。有办法做到这一点吗?。我试着这么做,但没成功。。。
我有一个表格,每个单元格都有一个弹出框,如下例所示: 对 popover 的调用: 0, 'edited' : i.edited, 'final-installment' : i.last }" p
我的 Storyboard使用 UINavigationController(VC0),我使用 UIPopover 来加载新的 UIViewController (VC1)。从这个新的 UIViewC
这个问题在这里已经有了答案: iOS 13 - UIPopoverPresentationController sourceview content visible in the arrow (9
我是一名优秀的程序员,十分优秀!