Question

我需要显示一个类似this的交叉反应，并且每个div需要扩展onHover。它应将其他div推开或缩小。有人知道使用CSS或React条件classNames实现此目标的好策略吗？

我只能实现以下条件之一：十字或其他div的扩展和推开，但没有十字形式。

我很累： text-align: -webkit-center; 与 float: left;

Answer 1

有很多实现它的方法。看看我的代码段：

https://stackblitz.com/edit/react-opu88z

JS

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      hoveringEl: 1,
    };
  }

  getWidth = (n) => {
    if(this.state.hoveringEl === n){
      return 70
    } else {
      return 10
    }
  }

  hover = (n) => this.setState({ hoveringEl: n })

  render() {
    return (
      <div className="container">
       <div 
        style={{ backgroundColor: 'red', width: `${this.getWidth(1)}%` }}
        onMouseEnter={() => this.hover(1)} 
       />
       <div 
        style={{ backgroundColor: 'green', width: `${this.getWidth(2)}%` }}
        onMouseEnter={() => this.hover(2)} 
       />
      <div 
        style={{ backgroundColor: 'yellow', width: `${this.getWidth(3)}%` }}
        onMouseEnter={() => this.hover(3)} 
       />
       <div 
        style={{ backgroundColor: 'blue', width: `${this.getWidth(4)}%` }}
        onMouseEnter={() => this.hover(4)} 
       />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

CSS

div.container {
  width: 100%;
  min-height: 50px;
}

div.container > div{
  height: 50px; 
  float: left;
}

有没有很好的方法来实现在onHover上展开的div交叉？

1 个答案: