悬停另一个元素(ReactJS)时如何更改一个元素的样式?

里卡多

因此,基本上,当我将鼠标悬停在h1的“ drive”选项上时,我希望显示一个包含其他几个详细选项的div容器。然后,如果我单击另一个h1的“ ride”选项,则我希望同时显示具有更多详细信息和选项的div。一次只能选择一个,骑行/驾驶,但是如果我将鼠标悬停在骑车上,则显示的div需要一直停留到鼠标离开div为止,如果我将鼠标悬停在驱动器上,则需要出现驱动器div 。希望你们能提供帮助!这是我的代码

import React, { Component } from 'react';
import './App.css';

class Header extends Component {
  render() {
    return (
      <div className="Nav">
        <header className="Nav-header">
          <h1 className="Nav-title">Halcon</h1>
          <p className="Nav-drive"><a href="*" className="Nav-link" onMouseEnter={this.mouseOver.bind(this)} onMouseLeave={this.mouseOut.bind(this)}>Drive</a></p>
          <p className="Nav-seperator">|</p>
          <p className="Nav-ride"><a href="*" className="Nav-link">Ride</a></p>
        </header>
         // Div i want to appear if Drive is hovered
        <div className="Drive-toggle">
          <h3>Why drive with us?</h3>
          <h3>Safety</h3>
          <h3>Requirements to Drive</h3>
          <h3>Driver App</h3>
          <h3>Driver - Log In</h3>
        </div>
        // Div i want to appear if Ride is hovered
        <div className="Ride-toggle">
          <h3>Why drive with us?</h3>
          <h3>Safety</h3>
          <h3>Requirements to Drive</h3>
          <h3>Driver App</h3>
          <h3>Driver - Log In</h3>
        </div>

      </div>
    );
  }
}

export default Header;
萨吉夫堡

您可以使用state来存储的布尔值hovered,并使用onMouseEnteronMouseLeave来更新state

然后,您可以有条件地render设置样式,CSS类或组件

这是一个小的运行示例:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hovered: false
    };
  }

  onMouseEnter = e => {
    this.setState({ hovered: true });
  };

  onMouseLeave = e => {
    this.setState({ hovered: false });
  };

  render() {
    const { hovered } = this.state;
    const style = hovered ? { backgroundColor: "#333", color: "#fff" } : {};
    return (
      <div>
        <div onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
          Hover over me!
        </div>
        <hr />
        <div style={style}>Was it hovered?</div>
        <hr />
        {hovered && <div>Yes!!</div>}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

当另一个元素纯粹悬停在 css 中时,如何更改一个元素的样式属性?

如何在悬停另一个元素时更改一个元素的颜色?

悬停时,更改不近的另一个元素

悬停在另一个元素上时如何更改元素的CSS元素

CSS - 悬停链接时更改另一个元素的样式?

当将另一个元素悬停在元素上时,如何更改:hover状态?

如何在另一个元素悬停时更改多个元素 css?

悬停元素时,使另一个元素出现

当悬停另一个元素不起作用时更改元素的样式

当另一个元素悬停在元素上时更改元素中的文本

当一个元素悬停并影响CSS中的另一个元素/类时,如何添加悬停效果?

悬停一个元素以更改另一个元素的属性

将一个元素悬停在另一个元素上时更改其CSS

在输入悬停时选择另一个元素

sass:悬停另一个div时影响另一个元素

当焦点是另一个元素时更改元素的样式

当另一个元素处于活动状态时更改元素的样式

悬停一个伪元素时,使另一个伪元素出现?

将鼠标悬停在另一个元素上时如何更改元素的颜色?

当我将父子元素悬停到另一个父子元素时,CSS问题如何应用更改?

如何在元素悬停时为另一个元素设置动画?

单击另一个元素时如何关闭另一个元素

在另一个元素上悬停时更改div内容

更改悬停时另一个元素的z-index

将鼠标移到另一个 div 中的另一个元素上时如何更改 div 样式?

当悬停在另一个<li>上时,如何阻止我的<li>元素移动?

当内部文本更改为另一个值时,如何在单元格内添加样式元素

如何在单击另一个元素时关闭一个元素

使用CSS单击另一个元素时如何显示一个元素?