react js中的滑动菜单悬停效果答案

【问题标题】：sliding menu hover effect in react jsreact js中的滑动菜单悬停效果
【发布时间】：2021-12-31 06:54:02
【问题描述】：

https://codepen.io/shoumiksk/pen/PoJmQEN

这是我想在 React 中实现的 html css 版本。

这是我的反应代码：

function App() {
const marker = document.querySelector('#marker')
      const item = document.querySelectorAll('ul li a')
      function indicator(e){
        marker.style.top = e.offsetTop+'px';
        marker.style.width = e.offsetWidth+'px';
        
      }
  return (
    <div className="App">
    <ul>
      <div id="marker"></div>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>Home</a></li>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>about</a></li>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>services</a></li>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>contact</a></li>
      <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>team</a></li>
    </ul>
    </div>
  );
}

CSS：

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul {
  position: relative;
}
ul li {
  list-style: none;
  font-size: 2rem;
}
ul li a {
  position: relative;
  text-decoration: none;
  padding: 0 1rem;
}
#marker {
  height: 3rem;
  position: absolute;
  top: 0;
  background-color: #2196f3;
  transition: 0.5s;
}

但这并没有按预期工作，有时刷新后不起作用。

我知道我做错了什么，还有其他方法吗？

【问题讨论】：

您正在使用目标调用事件，但是它没有方法 offsetTop、offsetWidth。您应该只放置没有目标的事件并使用方法 offsetX、offsetY，如下所示：onMouseMove={(e)=> indicator(e)
那么它是如何处理纯 HTML 的呢？即使做出反应，如果我做出一些错误的更改（例如添加一些评论）并保存文件，它也会起作用，然后它也开始反应。如果我刷新然后再次停止工作。
我无法获得您想要实现的目标。它应该如何工作？我已经检查了刷新 - 它工作正常。
它适用于 HTML CSS，但在 react 中无法正常工作

标签： javascript css reactjs

【解决方案1】：

请检查下面的代码以在 react 中实现您所需的菜单设计。

这是我的代码：

export default function App() {
  const menuItem = [
    { i: 0, name: 'Home', link: '/' },
    { i: 1, name: 'about', link: '/' },
    { i: 2, name: 'services', link: '/' },
    { i: 3, name: 'contact', link: '/' },
    { i: 4, name: 'team', link: '/' },
  ];
  const [selected, setSelected] = useState(null);
  const item = document.querySelectorAll('ul li a');
  function indicator(index) {
    setSelected(index)
  }

  const renderMenu = menuItem.map((item, i) => {
    return (
      <ul>
        <li>
          <a href="/" className={selected==i ? 'isSelected':'menulist'} onMouseMove={(e) => indicator(i)}>
            {item.name}
          </a>
        </li>
      </ul>
    );
  });
  return <div className="App">{renderMenu}</div>;
}

.CSS

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
}
ul {
  position: relative;
}
ul li {
  list-style: none;
  font-size: 2rem;
}
ul li a {
  position: relative;
  text-decoration: none;
  padding: 0 1rem;
  color: white;
}
.isSelected {
  height: 4rem;
  top: 0;
  background-color: #2196f3;
  transition: 0.5s ease;
}

您可以将任何所需的悬停 CSS 放在 isSelected 类中，它会像一个魅力一样工作。

这是我的代码演示链接：https://stackblitz.com/edit/react-mewmxh?file=src%2Fstyle.css

【讨论】：

这可行，但不是我想要的，它缺少滑动动画。
这就是为什么我在回答中提到isSelected类中需要css

【解决方案2】：

所以我可以通过使用这个函数来复制它：

  let item;
  let marker;
  const indicator = (e) => {
    marker.style.top = e.offsetTop + "px";
    marker.style.width = e.offsetWidth + "px";
  };
  const getelements = () => {
    item = document.querySelectorAll("ul li a");
    marker = document.querySelector("#marker");
  };
  const fun = () => {   //Feel free to name whatever you want
    if (item === undefined || marker === undefined) {
      getelements();
    }
    if (item !== undefined && marker !== undefined) {
      item.forEach((link) => {
        link.addEventListener("mousemove", (e) => {
          indicator(e.target);
        });
      });
    }
  };

还有事件监听器：

<ul>
        <div id="marker"></div>
        <li>
          <a href="/" onMouseOver={() => fun()}>Home</a>
        </li>
        <li>
          <a href="/" onMouseOver={() => fun()}>about</a>
        </li>
        <li>
          <a href="/" onMouseOver={() => fun()}>services</a>
        </li>
        <li>
          <a href="/" onMouseOver={() => fun()}>contact</a>
        </li>
        <li>
          <a href="/" onMouseOver={() => fun()}>team</a>
        </li>
      </ul>

我正在使用 onMouseOver 而不是 onMouseMove，因为它会导致一些抖动。

【讨论】：