更改 CSS 样式 onHover 和 onClick 事件

Posted 2023-02-22

【中文标题】更改 CSS 样式 onHover 和 onClick 事件

【英文标题】：Changing CSS styling onHover and onClick event

【发布时间】：2018-03-09 20:41:55

【问题描述】：

在上述任何项目上悬停时，我想用一个灰色背景的框包围项目。

并且 onclick 我想将其更改为如下所示的内容（周围有一个具有背景颜色作为文本颜色的框，将文本颜色更改为白色并在框中有一个 x）。单击 x 应使其恢复到正常状态，如图 1 所示。

当前代码：

export default class GridSummary extends Component 

    renderJobStateSummary() 
        const jobCountSummaryDiv = [];
        if (this.props.jobStateCount.size !== 0) 
            jobCountSummaryDiv.push('Summary: ');
            for (const state of ['Total', ...jobStatesPriorityOrder]) 
                if (this.props.jobStateCount.has(state) &&
                    this.props.jobStateCount.get(state) !== 0) 
                    const cssClass = `$JOB_STATES_CSS_CLASS[state] clickable`;
                    jobCountSummaryDiv.push(
                        <span
                          className=cssClass
                          role="link"
                          tabIndex="-1"
                          key=state
                        >
                            JOB_STATE_DISPLAY_NAME[state]: this.props.jobStateCount.get(state)
                        </span>
                    );
                    jobCountSummaryDiv.push(' | ');
                
            
        
        return jobCountSummaryDiv;
    

    render() 
        return (
            <div className="summary-panel">
                 this.renderJobStateSummary() 
            </div>
        );
    

【问题讨论】：

您只能使用 html 和 CSS 来完成，到目前为止您尝试过什么。网上已经有很多例子了，你能把你的代码展示一下吗？

请张贴代码。最好创建一个 sn-p。

@Peter 你还需要 JS，因为 CSS 中没有点击事件

您可以阅读以下内容：***.com/help/how-to-ask 并提出正确的问题。提出问题需要最少的努力。

@MatthiasS。您可以添加隐藏的复选框并使用 :checked 伪类 :)

【参考方案1】：

尝试使用 :hover 和 :active 的伪类组合。对于客人，它喜欢按钮。 在样式边框选项中使用插入和开头的组合，它提供了非常好的视觉效果。

【讨论】：

一个关于 span 的简单例子真的可以帮助我更好地理解。

我的课 HTML 示例//O REDU STYLE.meni-slovo :悬停背景颜色：米色； .meni-slavo:active 边框：2px inset beige;颜色：紫色；