如何做CSS:JSX中的悬停功能？

Question

嗨,谢谢你们在这里的出色工作.我正在使用react.js为我的项目构建我的组件,我觉得现在我的项目有点困难.我试图设置一个具有悬停功能的按钮,我不知道如何应用它来做出反应.

这是代码:

let button = {
    backgroundColor: colorPalette.white,
    border: "1px solid rgb(12,106,145)",
    color: colorPalette.brandCol1,
    textAlign: 'center',
    textDecoration: 'none',
    fontSize : 'inherit',
    fontWeight : 600,
    padding : "5px 8px 5px 8px"
}

我想像在css中一样添加悬停样式

button:hover {
style here.......
}

什么是正确的语法？

Answer 1

您可以使用：

    const styles = {
    myStyleClassName: {
            padding: '16px 0px 16px 0px',
            '& a': {
                textDecoration: 'none',
                color: '#0000ee',
            },
            '& a:hover': {
            textDecoration: 'underline',
        },
    },
    myButtonClass: {
        '&:hover': {
             textDecoration: 'underline',
        },       
    },
};

....

render() {
    <span className={myStyleClassName}><a tag><button><someDomObjct></span>
    <button className={myButtonClass}>my label</button>
}

请参阅：http : //cssinjs.org/jss-nested/ ?v=v6.0.1回购不是所有事情都必需的，上述内容应该可以立即使用。

Answer 2

您可以onMouseEnter onMouseLeave用来调整组件的状态

<button
  onMouseEnter={() => setButtonHovered(true)} 
  onMouseLeave={() => setButtonHovered(false)}
  className={buttonIsHovered ? 'hover' : null}
/>

看到这里了解更多信息

还是只是css上课？

import './style.css'

<button className="Button"/>

.Button:hover {
  ...
}

Answer 3

使用 react 来管理悬停动画的状态是一种矫枉过正的方式。您不需要使用 javascript 来实现简单的 CSS 悬停……您在浏览器中，使用正确的工具完成正确的工作，对吧？

所以在这里我将展示几种不同的方法来实现同一目标：

在我的组件中，我导入了 glamor 和我的样式文件：

import { style } from 'glamor';
import styles from '../styles';

在我的样式文件中，我有这样的东西：

import { style } from 'glamor';

const styles = {
redHoverbutton: style({
  backgroundColor: "#aaaaaa",
  fontSize: "1.1rem",
  transition: "all ease .5s",
  ":hover": {
    backgroundColor: "#ff0000",
    color: "#ffffff"
  }
})
};

export default styles;

这使得悬停功能通过 css 工作，如下所示：

<div {...styles.redHoverbutton}></div>

这是一个 css 驱动的悬停效果（如果你注意到了，还有过渡），但这不是内联 css。尽管如此，您的样式可以在同一个文件中制作，如下所示：

let theStyle = style({ backgroundColor: "#aaaaaa",transition: "all ease .5s", ":hover": { cursor: "pointer", backgroundColor: "#ffff9b", color: "#fd0808" } });

return (<div {...theStyle}>Hover me!</div>);

现在，如何将样式和展开运算符放到 JSX 元素的同一行和内部？

<div {...style({ backgroundColor: "#aaaaaa", height: "30px", width: "100%", padding: "6px", fontsize: "16px", transition: "all ease .5s", ":hover": { cursor: "pointer", backgroundColor: "#ffff9b", color: "#fd0808" } })}>Hover Me!</div>

它可能并不完美，但它运行良好，并以类似的方式完成了与真正的内联样式相同的事情。