有没有一种好方法来实现扩展 onHover 的 div 交叉？答案

【问题标题】：Is there a good way to implement a div cross which expands onHover?有没有一种好方法来实现扩展 onHover 的 div 交叉？
【发布时间】：2019-10-20 04:34:11
【问题描述】：

我需要像 this 这样在 react 中显示一个叉号，并且每个 div 都需要展开 onHover。

它应该将其他 div 推开或使它们更小。有人知道使用 CSS 或 React 条件类名称实现此目标的好策略吗？

我只能实现这些：交叉或扩展和推开其他div，但没有交叉形式。

我累了： text-align: -webkit-center; 和 float: left;

【问题讨论】：

标签： html css reactjs typescript

【解决方案1】：

有很多方法可以实现它。看看我的sn-p：

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

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;
}

【讨论】：

你也可以在这里创建代码sn-p，而不是链接到stackblitz。
@JuniusL。用于反应应用程序的 stackblitz 通过多个文件/文件夹的脚手架、对 npm 包的控制、linting 等赢得了胜利。所以在未来我也会依赖 stackblitz