react js中的滑动菜单hover效果

Question

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

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

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

Answer 1

请检查以下代码以实现您所需的反应菜单设计。

这是我的代码：

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

您可以将任何所需的 hover CSS 放入isSelected class 中，它会像魅力一样工作。

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

Answer 2

所以我能够通过使用这个 function 来复制它：

  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，因为它会引起一些抖动。