Question

我尝试过

class MyColorPicker extends React.Component {
  render() {
      const darkColors = ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB'];
      const lightColors = ['#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB'];

    return (<div>
        <button id="color">Select color</button>
        <div className="picker">Text</div>
        <div className="picker">
        <table>
        <tbody>
        <tr>
            {darkColors.map(color => 
            <td style={{backgroundColor: color, width: 20, height: 20}} key={color}>{" "}</td>)}
        </tr>
        <tr>
            {lightColors.map(color => 
            <td style={{backgroundColor: color, width: 20, height: 20}} key={color}>{" "}</td>)}
        </tr>
        </tbody>
    </table>
    </div>
    </div>);
  }
}

css

.picker{
  display: none;
}

#color:hover + .picker{
  display: block !important;
}

该表未显示。我也尝试过从react-color向GithubPicker添加一个className。没用。

我不想在悬停状态下设置状态，因为我有很多组件要附加按钮和颜色选择器。在这种情况下，将鼠标悬停在一个按钮上时，将显示所有其他颜色选择器。我只想显示一个颜色选择器。我该如何实现？

Answer 1

#color:hover + .picker仅在.picker之后用于类#color:hover的元素。在您的情况下，您有两个.picker元素。因此，第一个.picker将显示，但css第二个元素将不显示。

请将两个.picker div都包装到一个div中，然后将.picker类放在包装的div元素上。

仍然，您将再获得一期。作为css，您尝试将css悬停在按钮上。当鼠标移至选择器时，按钮悬停将清除，并且.picker将再次消失。

因此，我们必须将所有元素包装在一个div中，然后将css悬停在包装的div上。

JSX

  <div>
    <div className="picker">
      <button id="color">Select color</button>
      <div className="picker-colors">
        <div>Text</div>
        <div>
          <table>
            <tbody>
              <tr>
                {darkColors.map(color => (
                  <td
                    style={{
                      backgroundColor: color,
                      width: 20,
                      height: 20
                    }}
                    key={color}
                  >
                    {" "}
                  </td>
                ))}
              </tr>
              <tr>
                {lightColors.map(color => (
                  <td
                    style={{
                      backgroundColor: color,
                      width: 20,
                      height: 20
                    }}
                    key={color}
                  >
                    {" "}
                  </td>
                ))}
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

CSS

.picker-colors {
  display: none;
}

.picker:hover .picker-colors {
  display: block;
}

这是一个可行的示例https://codesandbox.io/s/9yrr9wx60r

如何在响应中将按钮悬停在表格上？

1 个答案:

JSX

CSS