登录  /  注册
反应自定义按钮悬停样式不起作用
P粉434996845
P粉434996845 2023-09-11 22:09:50
[CSS3讨论组]

我的 React 项目中有一个按钮,我是这样设置的。

<label style={styles.label}>
    <input style={styles.input} type="file" accept="image/*" onChange={this.onUpload} />
</label>

样式设置是这样的

label : {
    borderRadius: '1vh',
    cursor: 'pointer',
    height: '2.5vh',
    margin: '0.5vh',
    minWidth: '50px',
    fontSize: '1.7vh',
    justifyContent: 'center',
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'row',
    backgroundColor : 'green',
    color           : 'black',
    opacity         : '0.9',
    '&:hover': {
        backgroundColor : 'green',
        color           : 'black',
        opacity         : '1',
    },
},
input : {
    zIndex   : -1,
    position : 'absolute',
    opacity  : 0,
    visibility : 'hidden',
}

当鼠标悬停在标签上时,悬停样式不会激活,我不确定我在这里做错了什么。

P粉434996845
P粉434996845

全部回复(1)
P粉797004644

您无法使用内联CSS添加悬停(如何我在内联 CSS 中写入“a:hover”?)。为此使用外部 CSS。 React文档中提到了如何添加外部样式表

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号