JS实现按钮悬停变色动画时class判断异常导致效果不符问题

你当前的判断逻辑存在明确的取值错误：

• 函数接收的参数x是当前触发事件的按钮元素本身，而landing是按钮上层祖先容器的类名，按钮自身的classList里根本不存在landing类，所以x.classList.contains("landing")永远返回false，所有按钮都会命中else分支变为红色。

方案1：修改JS逻辑，向上查找祖先类（符合你当前JS实现通用逻辑的需求） #

使用DOM元素自带的closest()方法，可直接向上遍历所有祖先节点，匹配是否存在对应选择器的元素：

function onbutton(x){
    // 向上查找是否有类为landing的祖先元素
    x.closest('.landing') ? x.style.color = "#DDCDE8" : x.style.color = "red";
}

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

注：closest()方法兼容所有现代浏览器，包括IE9及以上版本，无需额外兼容处理。

方案2：纯CSS实现（更适合hover样式交互，无需绑定JS事件） #

直接通过祖先类选择器控制按钮悬停样式，可完全删掉按钮上的onmouseover/onmouseout绑定，以及对应的JS函数，代码更简洁易维护：

/* landing容器下的按钮悬停样式 */
.landing button:hover {
    color: #DDCDE8;
}
/* projects容器下的按钮悬停样式 */
.projects button:hover {
    color: red;
}
/* 按钮默认样式 */
button {
    color: black;
}

内容的提问来源于stack exchange，提问作者rjc810