使用 javascript 更改悬停背景颜色

Question

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

这是 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 文件访问悬停属性？

Answer 1

您发布的 sn-ps 在 JS 和 HTML 中都包含一些错误：

HTML

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

Javascript

• 如果你想“捕捉”元素悬停事件，你需要将一个事件监听器（如果悬停 mouseover 或 mouseenter）附加到按钮

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

• 如果你想修改一个元素的 CSS style，挖到MDN: Window.getComputedStyle()

CSS

我觉得没问题。

您的问题

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

Answer 2

因此，您希望每次单击按钮都能稍微改变背景。我不明白你的十六进制点，但这是脚本之一，它根据给定的数值计算背景颜色。在这种情况下，它的属性 data-colorvalue

我对其进行了修改以适合您的情况，并使其每次点击增加 10 个。你可以在这里玩数学，这样你就可以得到不同的颜色：

// Grab the button:
const btn = document.querySelector('#btn')

// Detect on click event:
btn.onclick = e => {
    
    // Get the buttons color value, parseInt makes sure its INT:
    let color_value = parseInt(btn.getAttribute('data-colorvalue'))
    
    // Make the R value based on color_value:
    val_r = Math.round((255 * color_value) / 100)
    
    // Make the G value based on color_value:
    val_g = Math.round((255 * (100 - color_value)) / 100)
    
    // Make the B value based on color_value:
    val_b = Math.round(255 - (color_value * 1.5))
    
    // Format and set as buttons background:
    btn.style.backgroundColor = 'rgb(' + val_r + ', ' + val_g + ', ' + val_b + ')'
    
    // Set the new color value plus 10.. you can play with this formula:
    btn.setAttribute('data-colorvalue', color_value + 10)
}

<button id="btn" data-colorvalue="1">Click me</button>

如果您想将悬停更改为伪，则you need magic。这是一个完全独立的问题。

你的标题说文字颜色和问题背景颜色。因此，如果您想更改文本/字体颜色，只需使用 btn.style.color 而不是 backgroundColor。

Psedo 类永远不会像这样转到您的 html：

编辑

根据 cmets 中提供的其他信息，我们计算出，您希望在每次单击按钮时更改悬停背景颜色。

这是一个非常奇怪的情况和奇怪的要求。但其中一种方法是在每次点击时制作新的样式元素内容，如下所示：

// Grab the button:
const btn = document.querySelector('#btn')

// Make style element:
let style = document.createElement('style')

// Detect on click event:
btn.onclick = e => {
    
    // Get the buttons color value, parseInt makes sure its INT:
    let color_value = parseInt(btn.getAttribute('data-colorvalue'))
    
    // Make the R value based on color_value:
    val_r = Math.round((255 * color_value) / 100)
    
    // Make the G value based on color_value:
    val_g = Math.round((255 * (100 - color_value)) / 100)
    
    // Make the B value based on color_value:
    val_b = Math.round(255 - (color_value * 1.5))
    
    // Set the new color value plus 10.. you can play with this formula:
    btn.setAttribute('data-colorvalue', color_value + 10)
    
    // Now starts the magic...  
    // Make the css contents for the style element:
    let css = '#btn:hover{background-color:rgb(' + val_r + ', ' + val_g + ', ' + val_b + ')}'
    
    // If style element exists already, then lets overwrite its contents:
    if (style != undefined) style.innerHTML = css
    
    // .. however if there is none, then we must append new:
    else style.appendChild(document.createTextNode(css))
    
    // Now we simply append the style element to the head:
    document.getElementsByTagName('head')[0].appendChild(style)
}

<button id="btn" data-colorvalue="1">Click me</button>

Answer 3

回答

在 javascript 方面，您可以使用 mouseover 事件处理程序

示例

btn.addEventListener("mouseenter", function( event ) {   
  event.target.style.color = "purple";
}, false);
btn.addEventListener("mouseleave", function( event ) {   
  event.target.style.color = "";
}, false);

参考

MDN : mouseover event

Answer 4

您可以使用!important，但您可能希望通过使用JavaScript 设置CSS 变量或使用mouseenter 和mouseleave 事件处理程序来重构您的代码。

const btn = document.querySelector('#btn');
btn.style.backgroundColor = 'red'

:root {
  --clr-black: black;
  --clr-white: white;
}

.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) !important;
}

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

Answer 5

#btn-hero:focus {
  color: red;
  background: blue;
}

只使用焦点