如何在JSX中執行CSS：懸停功能？

嗨，感謝您在這裏的出色工作。我正在爲我的項目使用react.js來構建我的組件，並且現在我感覺有點卡住了我的項目。我正在嘗試使用懸停功能設計一個按鈕，但我不知道如何應用此功能來做出反應。如何在JSX中執行CSS：懸停功能？

下面是代碼：

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

什麼是正確的語法？

來源

2017-06-22 coco

在JavaScript中使用React和事件處理函數代替 – Li357

可以提供實際的React代碼嗎？ –

您可以使用onMouseEnteronMouseLeave調整組件的狀態

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

看到here更多信息

或只使用一個css類？

import './style.css' 

<button className="Button"/> 

.Button:hover { 
    ... 
}

來源

2017-06-22 01:13:28

您可以使用：

cost 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 回購是沒有必要的一切，上面應該工作開箱。

來源

2018-03-08 19:26:53 generalG

如何在JSX中執行CSS：懸停功能？

回答

相關問題