Css 对建议作出反应

我正在学习使用react和bootstrap css构建网站， 我有旋转木马和分离导航。 下面是我的旋转木马的示例代码

class Home extends React.Component {
     mousehover() {
         ... ???? .....
     };
     render() { return (
        <div className="row">
            <div id="carouselExampleIndicators" className="carousel slide col-9" data-ride="carousel">
                <div className="carousel-inner" role="listbox">
                    <div className="carousel-item active">
                        <img className="d-block img-fluid" src="http://northdelawhere.happeningmag.com/wp-content/uploads/banner_sample300x300.jpg"
                            alt="First slide" />
                    </div>
                    <div className="carousel-item">
                        <img className="d-block img-fluid" src="http://www.raymiller.cc/thumbnail/exterior-beadboard-paneling-4-texture-plus-indoor-outdoor-siding-panel-beadboard-oak-sample-300-x-300.jpg"
                            alt="Second slide" />
                    </div>
                    <div className="carousel-item">
                        <img className="d-block img-fluid" src="..." alt="Third slide" />
                    </div>
                </div>
                <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span className="sr-only">Previous</span>
                </a>
                <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span className="carousel-control-next-icon" aria-hidden="true"></span>
                    <span className="sr-only">Next</span>
                </a>
            </div>
            <div className="col-3">
                <ul className="flex-column">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" onmouseover={this.mousehover}>one</li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1">two</li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2">three</li>
                </ul>
            </div>
        </div> 
    )} 
}
React.render(<Home />, document.getElementById('root'));

class Home扩展了React.Component{
鼠标套（）{
... ???? .....
};
render（）{return(

1
两个
三个

)} 
}
React.render（，document.getElementById（'root'））；

我正在尝试使用onmousehave为我的列表创建事件，但失败。 任何人都可以帮助我给出onmousehave事件的线索/示例，该事件将滑动到目标旋转木马（数据滑动到）

非常感谢。

请查看React文档的，它解释了如何在React中使用类似于

onMouseEnter

和

onMouseLeave

的事件：

您的事件处理程序将被传递给

SyntheticEvent

，一个 围绕浏览器的本机事件的跨浏览器包装。它有 与浏览器的本机事件相同的界面，包括

stopPropagation（）

和

preventDefault（）

，事件除外 在所有浏览器中都是相同的

---

也就是说，根据您的用例，最好使用CSS的

：hover

伪类实现悬停效果