前言

在react语法中使用onMouseOut鼠标移除，如果使用这个方法的标签中还有子组件的话，就会被执行多次，只是记录我自己的方法(也不算方法)

问题描述：

公司要求在网站的菜单栏的菜单加上hover效果，我一想，这不简单吗，一顿操作就搞定了，
上图：

选中时有个黄颜色的点，鼠标移入的是第二个 是蓝颜色的点；

我拿去给ui看，然后说鼠标移入时是蓝色，移除后变成黄色，过200毫秒再消失，我擦这是什么需求。

没办法端人家的碗，就要服人家管；

然后再网上一通找，找到的是原生开发的解决方案，我们用的是react+next的项目网站，完全套不上，

知道原因是什么，就是使用了onMouseOut这个方法的元素下面还有子元素，鼠标移动到子元素上或者移出子元素也会触发这个事件，但是解决比较麻烦，

我就想个偏方，就是让有onMouseOut这个方法的元素里面没有子元素或者用它的一个子元素然后使用绝对定位覆盖其它子元素，把当前这个子元素的宽高都设置成父组件一样的宽高，然后就有了我现在的代码

@Override
        <ul className={` hidden d:flex items-center mb-0   ${styles.menu}`}>
              {menuList.map((v) => (
                <li
                  key={v}
                  className="relative cursor-pointer "
                  onClick={() => {
                    setSelect(v);
                    onClick(v);
                  }}
                  onm ouseMove={() => {
                    clearTimeout(t);
                    if (select !== v) {
                      setHovert(v);
                      setHovert2(true);
                    }
                  }}
                  //在li这里使用的onMouseOut方法
                  onm ouseOut={() => {
                    if (select !== v) {
                      setHovert2(false);
                      //200毫秒后再清空变量，达到消失的效果
                      t = setTimeout(() => {
                        setHovert('');
                      }, 200);
                    }
                  }}
                >
                //这里就是使用一个子元素用绝对定位，用来覆盖其它子元素
                  <div className='absolute top-0 left-0 w-full h-full '></div>
                  <div className='flex flex-col items-center justify-center '>
                    <div
                      className={`${select == v ? 'font-bold' : styles.menuDiv}`}
                    >
                      {v}
                    </div>
                    <div
                      className={`w-5px h-5px ${select == v || hover == v
                        ? 'visible font-black'
                        : ' invisible'
                        }`}
                      style={{
                        backgroundColor:
                          hover2 && select !== v ? '#21A4F2' : '#E79D30',
                        height: '5px',
                        width: '5px',
                      }}
                    ></div>
                  </div>
                </li>
              ))}
            </ul>

这样就解决鼠标移入到多个子元素中多次触发onMouseOut事件了，只会在用了绝对定位的子元素上触发一次；

ps: 代码写得不好，希望大家多多包涵；

pps:className中的 类名我是用的 taiwindicss 来布局的，比较方便

标签：200,鼠标,onMouseOut,windicss,hooks,元素,5px,select
来源： https://blog.csdn.net/Mr_xiaopang19/article/details/120968936