<div className={styles.colorItem} style={{ background: color}}></div>我想给这个div加一个鼠标移入光标变成禁用样式,写在行内样式里面
时间: 2024-09-28 21:06:59 浏览: 6
要在`<div>`元素上添加鼠标悬停时禁用样式的行内样式,你可以这样做:
```html
<div className={`${styles.colorItem} ${hoverDisabled ? 'cursor-not-allowed' : ''}`} style={{ background: color }}>
...内容...
</div>
<style>
.cursor-not-allowed {
cursor: not-allowed; /* 禁用默认光标 */
}
</style>
<script>
const hoverDisabled = false; // 当需要禁用光标时设置为 true
// 如果你想在鼠标移到 div 上时禁用光标,可以这样:
this.divElement.addEventListener('mouseover', () => { hoverDisabled = true });
this.divElement.addEventListener('mouseout', () => { hoverDisabled = false });
</script>
```
这里,我们通过JavaScript动态地控制`cursor-not-allowed`类的添加或删除。当`hoverDisabled`为`true`时,div的鼠标悬浮样式会变为禁用状态。当你不再悬停时,再次将`hoverDisabled`设回`false`即可恢复。
相关问题
{searchList.length !== 0 && ( <> <div style={{ fontSize: 15, color: '#9f9f9f', padding: '5px 6px' }}> 已查询到{searchList.length}条数据 </div> <div> <Checkbox.Group value={selectedList} onChange={()=>{console.log(1111);}}> <Space direction="vertical" style={{ width: '100%', backgroundColor: '#fff' }}> {searchList.map((item) => ( <Checkbox value={item.organizationId} key={item.organizationId}> <div style={{ marginLeft: 5 }}> <div className={styles.positionName}> {item.name} {mark === 'personnel' && item.positionName && <>({item.positionName})</>} </div> <div className={styles.orgName} style={{ display: mark === 'position' ? '' : 'none' }} > {item.organizationName} </div> </div> </Checkbox> ))} </Space> </Checkbox.Group> </div> </> )} 这是我写的一个公共组件,但是这个组件的onChange方法在一个tab页能执行,再另外一个tab页执行不了
I'm sorry, but the text you provided is incomplete and it is not clear what you are asking for. Could you please provide more context or clarify your question so that I can better assist you?
class App extends React.Component { state = { month: '三月', day: '28', once: '学习React', twice: '40分钟' } render () { return ( <div className="one"> <div className="two"> <div className="date"> <div className="month">{this.state.month}</div> <div className="day">{this.state.day}</div> </div> <div className="content"> <div className="once">{this.state.once}</div> <br/> <div className="twice">{this.state.twice}</div> </div> </div> </div> ) } } ReactDOM.render(<App />, document.getElementById('root'))
这是一个 React 组件,它会在页面上渲染一个日历和待办事项列表。组件中的 state 包含了月份、日期、一次性任务和二次性任务。在 render 方法中,通过 JSX 语法将这些数据渲染到了页面上。其中,className 用于指定样式类名,div 标签用于表示页面上的元素。最后,通过 ReactDOM.render 方法将组件渲染到了页面上。