悬停在js中的按钮动画

Question

在 js 中，我想做一个通用的“悬停 on/off”函数，只要用户将鼠标悬停在按钮上，就会调用该函数。但是，我有两种类型的按钮：

<body>
    <main>
        <section class="landing">
            <nav id="navbar">
                <h2 id="logo">
                    <button onclick="location.href='link'" 
                    onmouseover="onbutton(this)" onmouseout="offbutton(this)"
                    type="button">GitHub</button>
                </h2>
    ...

和

div class="projects" id=#projects>
        <h2>My Projects</h2>

        <article class="project-elem">
            <div class="project-n js-scroll" id="dictocounter">

                <a href="link"><button
                onmouseover="onbutton(this)" onmouseout="offbutton(this)"
                type="button">Dictation Counter</button></a>
    ...

现在，我想将鼠标悬停在第一个按钮上将其颜色更改为#DDCDE8，并将鼠标悬停在第二个按钮上将其颜色更改为红色，因此我在 js 中创建了以下函数：

function onbutton(x){
    (x.classList.contains("landing")) ? x.style.color = "#DDCDE8" : x.style.color = "red";
}

function offbutton(x){
    x.style.color = "black";
}

然而，将鼠标悬停在任何按钮上会立即将其颜色更改为红色，即使第一个按钮包含在名为 landing 的 class 中也是如此。

Answer 1

您需要实际添加 class="landing" 以便 js 找到它

function onbutton(x){
    (x.classList.contains("landing")) ? x.style.color = "#DDCDE8" : x.style.color = "red";
}

function offbutton(x){
    x.style.color = "black";
}

<body>
    <main>
        <section class="landing">
            <nav id="navbar">
                <h2 id="logo">
                    <button onclick="location.href='link'" 
                    onmouseover="onbutton(this)" onmouseout="offbutton(this)" class="landing"
                    type="button">GitHub</button>
                </h2>
    div class="projects" id=#projects>
        <h2>My Projects</h2>

        <article class="project-elem">
            <div class="project-n js-scroll" id="dictocounter">

                <a href="link"><button
                onmouseover="onbutton(this)" onmouseout="offbutton(this)"
                type="button">Dictation Counter</button></a>

悬停在js中的按钮动画

hovering over buttons animation in js

html

javascript

button