时间戳

首页 > 解决方案 > 使用 javascript 更改悬停背景颜色

javascript - 使用 javascript 更改悬停背景颜色

问题描述

我想访问按钮的悬停背景颜色以在每次单击按钮时更改悬停背景颜色。

这是 index.html 文件中的按钮标签

<button class="btn-hero btn-hero:hover" id="btn">click me</button>

这是在css文件中：

.btn-hero {
  font-family: var(--ff-primary);
  text-transform: uppercase;
  background: transparent;
  color: var(--clr-black);
 
}
.btn-hero:hover {
  color: var(--clr-white);
  background: var(--clr-black);
}

我可以像这样访问按钮背景颜色：

btn.addEventListener("click", function () {

btn.style.backgroundColor = 'some_color'

});

这会更改按钮颜色，但会否定悬停属性。

我尝试在 app.js 中这样做：

let button_hover = document.querySelector(".btn-hero:hover")

但这会返回一个空值。

有没有办法从 app.js 文件中的 css 文件访问悬停属性？

标签： javascriptcsshover

解决方案

您发布的片段在 JS 和 HTML 中都包含一些错误：

HTML

  • <button class="btn-hero" id="btn">click me</button>不应包含:hover，因为这是一个 CSS 伪选择器（在这种情况下连接到btn-hero），并且只能在 CSS 中使用（或由 Javascript 引用）。删除btn-hero:hover.

Javascript

  • 如果要“捕获”元素悬停事件，则需要将 eventListener （在悬停mouseover或mouseenter的情况下）附加到按钮

  • Whiledocument.querySelector(".btn-hero:hover")是一个合适的选择器，但由于 Javascript 的异步特性，当 JS 函数运行时会捕获悬停完全是偶然的。这就是函数返回 NULL 的原因。

  • 如果要修改元素的 CSS样式，请深入MDN：Window.getComputedStyle()

CSS

对我来说似乎没问题。

你的问题

请确保您了解颜色的十六进制值本质上不是一个长的十六进制值，而是由 2 个十六进制数字组成的 3 个类似于 R、G、B 的十六进制值的串联。将 100hex 添加到任何 #xxxxxx（6 位）颜色会得到相当意想不到的结果。你想改变三个（R，G，B）中的哪一个？

推荐阅读