前言

本文将介绍如何使用React和DOM事来实现一个引人注目的交互式悬停方块效果。通过悬停鼠标，方块将随机改变颜色并显示阴影，为网页增添了动态和视觉吸引力。阅读本文，你将了解到使用React实现事件处理和动态样式设置的技巧，为你的Web应用程序带来更多有趣的交互效果。

场景

在现代Web应用程序中，交互性和动态效果对于提升用户体验至关重要。悬停效果就是一种常见的用户交互方式，当用户将鼠标悬停在特定区域时，相关元素会发生变化，从而吸引用户的注意力。本文我们就将一起探讨如何使用React来实现一个悬停方块效果的CSS特效。

下面就一起来看看吧→

开发

首先，导入React和一些必要的钩子函数，以及我们将在组件中使用的样式表。如下：

import React, { useEffect, useRef, useState } from 'react'; 
import './index.less'

index.less文件的代码如下：

.App {
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 600px;
  overflow: hidden;
}

.square {
  background-color: #333;
  box-shadow: 0 0 2px #000;
  height: 16px;
  width: 16px;
  margin: 2px;
  transition: 2s ease;
}

.square:hover {
  transition-duration: 0s;
}

接着，会定义一个颜色数组和一个常量SQUARES，用于设置方块的数量。如下：

const colors = ['#861104', '#7611a0', '#127ec7', '#e2931d', '#2ecc71'];
const SQUARES = 600;

接下来，就是把将要实现的效果创建为一个组件，并取名为HoverBlock。如下：

/**
 * 悬停方块效果
 * @constructor
 */
const HoverBlock = () => {

  useEffect(() => {
    const container = document.getElementById('container');
    const squares = [];

    for (let i = 0; i < SQUARES; i++) {
      const square = document.createElement('div');
      square.classList.add('square');

      square.addEventListener('mouseover', () => setColor(square));
      square.addEventListener('mouseout', () => removeColor(square));

      squares.push(square);
      container.appendChild(square);
    }

    return () => {
      squares.forEach(square => {
        square.removeEventListener('mouseover', () => setColor(square));
        square.removeEventListener('mouseout', () => removeColor(square));
        container.removeChild(square);
      });
    };
  }, [])

  return (
      <div id="container" className="container"></div>
  )
}

export default HoverBlock;

在上述代码中，使用createElement方法创建了一个div元素，并为其添加了square类。然后，为每个方块元素添加了mouseover和mouseout事件监听器，分别用于设置方块颜色和移除颜色。

在useEffect的返回函数中，我们通过遍历squares数组，分别移除了方块元素上的事件监听器，并将方块从容器中移除。这样可以确保在组件卸载时，清除所有方块元素和相关事件。

接下来，完善useEffect中使用到的两个辅助函数getRandomColor和setColor，用于随机生成颜色和设置方块的样式。

/**
 * 获取随机颜色
 */
const getRandomColor = () => {
  return colors[Math.floor(Math.random() * colors.length)];
}


/**
 * 设置颜色
 * @param element
 */
const setColor = (element: any) => {
  const color = getRandomColor();
  element.style.background = color;
  element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`;
}

在getRandomColor函数中，通过生成一个随机索引来从颜色数组中获取随机颜色值。

而在setColor函数中，首先调用了getRandomColor函数获取一个随机颜色，然后将该颜色应用于方块元素的background和boxShadow样式属性，从而实现了鼠标移入时为方块设置颜色和阴影的变化效果。

最后，使用removeColor函数处理鼠标移出后需将方块元素的颜色和阴影恢复为默认状态。如下：

/**
 * 移除颜色
 * @param element
 */
const removeColor = (element: any) => {
  element.style.background = '#333';
  element.style.boxShadow = '0 0 2px #000';
}

到这里，该组件的主要代码已经编写完毕。接下来就是将该组件引用至项目进行使用。如下：

import HoverBlock from "./components/HoverBlock";

function App() {

  return (
    <div className="App">
      <HoverBlock />
    </div>
  )
}

export default App;

启动项目就可以看到最终的效果了。如下图所示：

完整代码

import React, {useEffect} from 'react';
import './index.less';
const colors = ['#861104', '#7611a0', '#127ec7', '#e2931d', '#2ecc71'];
const SQUARES = 600;


/**
 * 悬停方块效果
 * @constructor
 */
const HoverBlock = () => {

  useEffect(() => {
    const container = document.getElementById('container');
    const squares = [];

    for (let i = 0; i < SQUARES; i++) {
      const square = document.createElement('div');
      square.classList.add('square');

      square.addEventListener('mouseover', () => setColor(square));
      square.addEventListener('mouseout', () => removeColor(square));

      squares.push(square);
      container.appendChild(square);
    }

    return () => {
      squares.forEach(square => {
        square.removeEventListener('mouseover', () => setColor(square));
        square.removeEventListener('mouseout', () => removeColor(square));
        container.removeChild(square);
      });
    };
  }, [])


  /**
   * 获取随机颜色
   */
  const getRandomColor = () => {
    return colors[Math.floor(Math.random() * colors.length)];
  }


  /**
   * 设置颜色
   * @param element
   */
  const setColor = (element: any) => {
    const color = getRandomColor();
    element.style.background = color;
    element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`;
  }


  /**
   * 移除颜色
   * @param element
   */
  const removeColor = (element: any) => {
    element.style.background = '#333';
    element.style.boxShadow = '0 0 2px #000';
  }


  return (
      <div id='container' className='container'></div>
  )
}

export default HoverBlock;

至此，通过使用React的Hooks和DOM事件，我们就成功地开发了一个交互式悬停方块的效果。当鼠标悬停在方块上时，方块会随机改变颜色，并显示出阴影效果，从而增加了页面的交互性和视觉吸引力。

这个悬停方块效果可以应用于各种Web应用程序中，例如展示页面、游戏界面或个人主页等，为用户提供更加丰富的交互体验。

最后，希望看完本文的你能理解React中的事件处理和动态样式设置方法，也希望能够启发你在今后的开发中实现更多有趣的交互效果。

后语

小伙伴们，如果觉得本文对你有些许帮助，点个👍或者➕个关注再走吧^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。