英文:
How can I change the hover style for inline CSS in a React page?
问题
我将我的CSS更改为内联CSS。虽然我必须将按钮的:hover更改为内联CSS，但这并不起作用。有没有办法解决这个问题？
<button
style={{
borderRadius: "10px",
backgroundColor: "#004577",
color: "#ffffff",
border: "0px",
width: "auto",
}}
className="d-flex col-4 justify-content-center p-2"
type="submit">
更新个人资料
</button>
我尝试了，但这没有起作用。
英文:
I changed my css to inline css. while i have to change the button:hover to the inline css, But that is not working. Is there any way to solve this?
<button
style={{
borderRadius: "10px",
backgroundColor: "#004577",
color: "#ffffff",
border: "0px",
width: "auto",
}}
className=" d-flex col-4 justify-content-center p-2"
type="submit">
Update profile
</button>
I tried but this is not working.
答案1
得分: 2
你可以使用以下两个属性来观察鼠标悬停或离开元素的情况，但不能直接实现你要的效果：
<button onMouseEnter={() => {console.log('hovered');}} onMouseLeave={() => {console.log('left');}} />
这里有一个类似的问题的链接：这里
英文:
You can't.
You can watch instead with these 2 props if you hovered or left the element:
<button onMouseEnter={() => {console.log('hovered');}} onMouseLeave={() => {console.log('left');}} />
A similar ticket here
答案2
得分: 1
这是我的解决方案。
import React, { useState } from "react";
function App() {
const [isHovered, setIsHovered] = useState(false);
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
return (
<button
style={{
borderRadius: "10px",
backgroundColor: isHovered ? "#002744" : "#004577",
color: "#ffffff",
border: "0px",
width: "auto"
}}
className="d-flex col-4 justify-content-center p-2"
type="submit"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
更新个人资料
</button>
);
}
export default App;
英文:
Here's my solution.
import React, { useState } from "react";
function App() {
const [isHovered, setIsHovered] = useState(false);
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
return (
<button
style={{
borderRadius: "10px",
backgroundColor: isHovered ? "#002744" : "#004577",
color: "#ffffff",
border: "0px",
width: "auto"
}}
className="d-flex col-4 justify-content-center p-2"
type="submit"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
Update profile
</button>
);
}
export default App;
答案3
得分: 1
修改Diego Ammann的答案以实现在悬停时更改样式。
import React, { useState } from "react";
function App() {
const [isHovered, setIsHovered] = useState(false);
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
const non_hover_style = {
borderRadius: "10px",
backgroundColor: "cyan",
color: "#ffffff",
border: "0px",
width: "auto"
};
const hover_style = {
borderRadius: "10px",
backgroundColor: "red",
color: "#ffffff",
border: "0px",
width: "auto"
};
return (
<button
style={isHovered ? hover_style : non_hover_style}
className="d-flex col-4 justify-content-center p-2"
type="submit"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
更新个人资料
</button>
);
}
export default App;
英文:
For changing styles on hover, some modifications in Diego Ammann Answer.
import React, { useState } from "react";
function App() {
const [isHovered, setIsHovered] = useState(false);
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
const non_hover_style= {
borderRadius: "10px",
backgroundColor: "cyan",
color: "#ffffff",
border: "0px",
width: "auto"
}
const hover_style= {
borderRadius: "10px",
backgroundColor: "red" ,
color: "#ffffff",
border: "0px",
width: "auto"
}
return (
<button
style={isHovered ? hover_style : non_hover_style }
className="d-flex col-4 justify-content-center p-2"
type="submit"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
Update profile
</button>
);
}
export default App;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论