Wie zu tun, CSS :hover-Funktion in JSX ?

Hallo und vielen Dank für die tolle Arbeit hier. Ich bin mit react.js für mein Projekt zu bauen meine Komponenten und ich fühle mich ein wenig stecken in meinem Projekt jetzt. Ich bin versucht, Stil ein button mit einem hover-Funktion und ich weiß nicht, wie Sie diese anwenden, um zu reagieren.

Hier ist der code : 

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"
}

- und ich möchte hinzufügen, ein hover-Stil ebenso wie wir es in css mit 

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

Was ist die richtige syntax ?

  • Verwenden Sie Reagieren und event-Handler in JavaScript statt...
  • Könnte die tatsächliche Reagieren-code?
InformationsquelleAutor | 2017-06-22
  1. 9

    Können Sie verwenden:

        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>
}

    Finden Sie unter: http://cssinjs.org/jss-nested/?v=v6.0.1
    Die repo ist nicht notwendig für alles, das oben sollte funktionieren out of the box.

    InformationsquelleAutor generalG
  2. 6

    Können Sie onMouseEnter onMouseLeave zum einstellen der Zustand der Komponente

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

    sehen hier für mehr info

    oder benutzen Sie einfach eine css Klasse?

    import './style.css'

<button className="Button"/>

.Button:hover {
  ...
}
    InformationsquelleAutor Tyler Sebastian
  3. 0

    Reagieren mit Status verwalten für eine hover-animation ist so übertrieben. Sie sollten es auch nicht nötig, javascript zu verwenden, für ein einfaches CSS-hover...Du bist im browser, verwenden Sie das richtige Werkzeug für den richtigen job, die richtige?

    So, hier werde ich Ihnen zeigen, ein paar verschiedene Wege, das gleiche Ziel:

    In meine Komponente die ich importieren Glamour und meine styles-Datei:

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

    Und in meine styles-Datei, ich habe so etwas wie dieses:

    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;

    Und das macht die hover-Funktionalität über css, wie hier:

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

    Dies ist eine css-driven hover-Effekt (mit übergang wenn Sie bemerkt), aber dies ist kein inline-css. Nichtsdestoweniger, Ihren Stil gefertigt werden können, die in der gleichen Datei, wie das ist:

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

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

    Nun, wie man den Stil und den spread-operator auf der gleichen Linie und im inneren der JSX-element?

    <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>

    Kann es nicht perfekt sein, aber es funktioniert gut und erreicht die gleiche Sache wie eine wahre inline-Stil und in ähnlicher Weise.

    InformationsquelleAutor John
Schreibe einen Kommentar