Эффекты наведения рассматриваются как эффекты щелчка, но они работают правильно после изменения размера страницы. ⇐ CSS

[Anonymous]

Раньше они работали, но я пытался добавить ссылки на страницы на основе реакции, и это, похоже, нарушило эффекты наведения, и теперь я не могу заставить их снова работать должным образом. Они создают правильную анимацию наведения при нажатии и отлично работают после изменения размера страницы. Он также не отображает «кликабельную» руку указателя мыши при наведении на них и другую кнопку на странице, пока я не изменю размер. В чем здесь проблема?
РЕДАКТИРОВАТЬ: Кажется, это работает на новой странице в Chrome, но не на вкладке, где открыто много других вкладок - именно тогда происходит изменение размера при наведении.< /p>
Моя страница приложения:

Код: Выделить всё

import React from "react";
import Home from "./pages/Home";
import "./Styles/index.css";

const App: React.FC = () => {
return (



);
};

export default App;

Моя главная страница:

Код: Выделить всё

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./Styles/index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(



);

моя домашняя страница:

Код: Выделить всё

import React from "react";
import TopBar from "../components/TopBar";
import IntroSection from "../components/IntroSection";
import "../Styles/DefaultPage.css";

const Home: React.FC = () => {
return (




);
};

export default Home;

моя верхняя панель:

Код: Выделить всё

import React, { useEffect, useState } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import "../Styles/TopBar.css";

gsap.registerPlugin(ScrollTrigger);

const TopBar: React.FC = () => {
const [darkMode, setDarkMode] = useState(false);

useEffect(() => {
// Add button swing animation
const navButtons = document.querySelectorAll(".nav-button");
console.log("useEffect fired - styles should be applied now");
navButtons.forEach((button) => {
const btn = button as HTMLElement;

btn.addEventListener("mouseenter", () => {
btn.style.animation = "none"; // Remove existing animation
btn.offsetHeight; // Trigger reflow
btn.style.animation = "swing 2s ease-in-out forwards"; // Reapply animation
});
btn.style.display = "none";
btn.offsetHeight; // Trigger reflow
btn.style.display = ""; // Reset display
});

return () => {
navButtons.forEach((button) => {
const btn = button as HTMLElement;
btn.removeEventListener("mouseenter", () => {});
});
};
}, []);

const toggleDarkMode = () => {
setDarkMode((prevMode) => !prevMode);
document.body.classList.toggle("dark-mode");
};

return (


HOME
DEV & DESIGN
ACTING
FILMMAKING


{darkMode ? "Light Mode" : "Dark Mode"}



);
};

export default TopBar;

CSS верхней панели:

Код: Выделить всё

.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: white;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
}

/* Navigation buttons container */
.nav-buttons {
display: flex;
padding-left: 20px;
gap: 20px;  /* Space between buttons */
height: 100%;
padding-right: 20px;
}

/* Individual navigation button styling */
.nav-button {
background: none;
border: none;
font-family: inherit;
font-size: 1rem;
cursor: pointer;
color: #333;
padding: 10px;
transform-origin: top left;
transition: transform 0.1s ease, color 0.3s ease;
align-items: center;
}

/* Color change on hover */
.nav-button:hover {
animation: wiggle 0.5s ease-in-out; /* Use the same animation keyframes */
color: #555;
}

/* Swing animation class to add animation on hover */
.swing-animation {
animation: swing 2s ease-in-out forwards;
}

/* Dark mode toggle button styling */
.dark-mode-toggle {
background: none;
border: 2px solid #333;
font-family: inherit;
font-size: 1rem;
cursor: pointer;
padding: 8px 12px;
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.dark-mode-toggle-container {
display: flex;
align-items: center;
gap: 10px;
padding-right: 20px;
}

.dark-mode-toggle:hover {
background-color: #333;
color: #fff;
}

/* Dark mode styles */
body.dark-mode {
background-color: #333;
color: #fff;
}

body.dark-mode .top-bar {
background-color: #000; /* Solid black for dark mode */
}

body.dark-mode .nav-button {
color: #ccc;
}

body.dark-mode .dark-mode-toggle {
color: #fff;
}
@keyframes wiggle {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
75% {
transform: rotate(2deg);
}
100% {
transform: rotate(0deg);
}
}
/* Swinging animation */
@keyframes swing {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(15deg);
}
20% {
transform: rotate(-10deg);
}
30% {
transform: rotate(7deg);
}
40% {
transform: rotate(-5deg);
}
50% {
transform: rotate(3deg);
}
60% {
transform: rotate(-2deg);
}
70% {
transform: rotate(1deg);
}
80% {
transform: rotate(-0.5deg);
}
90% {
transform: rotate(0.2deg);
}
100% {
transform: rotate(0deg);
}
}

моя текущая тестовая версия сайта: https://mattekranz.com/

Подробнее здесь: https://stackoverflow.com/questions/792 ... er-resizin