我这里有用ReactJS编写的代码。
import React, { Component } from "react";
class Sidebar extends Component {
state = {
hovered: false
};
onMouseOver = e => {
this.setState({ hovered: true });
};
render() {
const { hovered } = this.state;
if (hovered) {
return (
<div
className="flex-container justify-content-end"
style={{
display: "flex",
textDecoration: "none",
listStyleType: "none"
}}
onMouseOver={this.onMouseOver}
>
<div className="col-sm-12 col-md-4">
<ul className="nav flex-column nav-pills">
<li
className="nav-item"
style={{ padding: "0.5em", backgroundColor: "#809fff" }}
>
{" "}
<a
href="prva_divizija.html"
style={{
backgroundColor: "#809fff",
borderRadius: "15px",
color: "white"
}}
className="nav-link"
onMouseOver={this.onMouseOver}
>
PRVA DIVIZIJA
</a>
</li>
<li
className="nav-item"
style={{
padding: "0.5em"
}}
>
{" "}
<a
href="druga_divizija.html"
style={{
backgroundColor: "#809fff",
borderRadius: "15px",
color: "white"
}}
className="nav-link"
onMouseOver={this.onMouseOver}
>
DRUGA DIVIZIJA
</a>
</li>
<li className="nav-item" style={{ padding: "0.5em" }}>
<a
href="treca_divizija.html"
style={{
backgroundColor: "#809fff",
borderRadius: "15px",
color: "white"
}}
className="nav-link"
onMouseOver={this.onMouseOver}
>
TRECA DIVIZIJA
</a>
</li>
<li className="nav-item" style={{ padding: "0.5em" }}>
<a
href="cetvrta_divizija.html"
style={{
backgroundColor: "#809fff",
borderRadius: "15px",
color: "white"
}}
className="nav-link"
onMouseOver={this.onMouseOver}
>
CETVRTA DIVIZIJA
</a>
</li>
<li className="nav-item" style={{ padding: "0.5em" }}>
<a
href="peta_divizija.html"
style={{
backgroundColor: "#809fff",
borderRadius: "15px",
color: "white"
}}
className="nav-link"
onMouseOver={this.onMouseOver}
>
PETA DIVIZIJA
</a>
</li>
<li className="nav-item" style={{ padding: "0.5em" }}>
<a
href="divizija_tuzla.html"
style={{
backgroundColor: "#809fff",
borderRadius: "15px",
color: "white"
}}
className="nav-link"
onMouseOver={this.onMouseOver}
>
DIVIZIJA TUZLA
</a>
</li>
<li className="nav-item" style={{ padding: "0.5em" }}>
<a
href="divizija_sarajevo.html"
style={{
backgroundColor: "#ff6666",
borderRadius: "15px",
color: "white"
}}
className="nav-link"
onMouseOver={this.onMouseOver}
>
DIVIZIJA SARAJEVO
</a>
</li>
<li
className="nav-item"
style={{
padding: "0.5em"
}}
>
<a
href="divizija_bugojno.html"
style={{
backgroundColor: "#ff6666",
borderRadius: "15px",
color: "white"
}}
className="nav-link"
onMouseOver={this.onMouseOver}
>
DIVIZIJA BUGOJNO
</a>
</li>
</ul>
</div>
</div>
);
}
当我将鼠标移到标签上时,代码应该会悬停。但是由于某种原因,它不起作用。我可以要求该解决方案的指导吗?我不要求最终解决方案。
答案 0 :(得分:2)
据我所知,react的元素没有hovered
状态(就像CSS一样)。但是,您可以使用onMouseEnter
和onMouseLeave
事件来确定事件是否悬停并相应地更新状态
有关示例实现,请参见以下答案:react show button on mouse enter