Rückenwind-CSS-Hover ändert die Textfarbe nicht ⇐ CSS

[Anonymous]

Ich bin völlig neu in diesem Rückenwind und stecke den ganzen Tag an diesem Problem fest. Ich bin so frustriert. Hier ist mein Code

Code: Select all

Some Text Here

Was ich erreichen möchte, ist, die Textfarbe zu ändern, wenn der Mauszeiger über die Schaltfläche bewegt wird. Die aktuelle Textfarbe ist Weiß und ich möchte, dass sie sich in Schwarz ändert. Es hat nicht funktioniert. Als ich das Chrome-Inspect-Tool verwende, habe ich festgestellt, dass die Textfarbe Weiß !important ist, und ich weiß nicht, wie das passiert ist. Ich habe es nicht definiert und weiß nicht einmal, wie. Was noch schlimmer ist, ist, dass ich die Textfarbe in jede beliebige Farbe ändern kann, wenn ich mit der Maus darüber fahre, wenn die Originalfarbe nicht weiß ist. Ich kann zunächst eine andere Farbe als Weiß haben und sie in jede Farbe ändern, die mir gefällt.
Wie Sie sehen, ist es ganz einfach. Ich schaffe es mit reinem CSS in etwa 10 Sekunden, es ist nicht nötig, einen ganzen Tag lang zu arbeiten.
Bitte helfen Sie mir hier.
Hier ist die tailwind.config-Datei, falls es nötig ist,

Code: Select all

const colors = require("tailwindcss/colors");

module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
boxShadow: {
sm: "0 1px 5px #65656599",
},
extend: {
fontFamily: {
body: ["Poppins"],
},
colors: {
black: {
hakkei: "#1a1a1a",
DEFAULT: "#000",
},
current: "currentColor",
gray: colors.blueGray,
indigo: colors.indigo,
red: colors.rose,
yellow: colors.amber,
blue: colors.blue,
black: "#333",
white: "#fff",
aqua: {
DEFAULT: "#99ced3",
dark: "#8abbbf",
},
navy: {
light: "#99ced3",
DEFAULT: "#2f415d",
dark: "#1d2a3d",
sky: "#00afffc2",
},
purple: colors.purple,
},
borderRadius: {
"5xl": "5rem",
"10xl": "10rem",
"20xl": "50%",
},
height: {
120: "32rem",
150: "40rem",
},
},
},
variants: {
textColor: ["responsive", "hover", "focus", "group-hover"],
},

plugins: [
"gatsby-plugin-postcss",
//require('@tailwindcss/forms'),
"@tailwindcss-neumorphism",
],
};