使用 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")

但是 returns 为空。

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

Answer 1

回答

In terms of javascript you can use mouseover event handler

例子

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 2

您可以使用 !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 3

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

只需使用焦点

Answer 4

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

HTML

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

Javascript

如果你想要 'catch' 元素悬停事件你需要附加一个 eventListener（在悬停的情况下 mouseover 或 鼠标输入) 到按钮
虽然 document.querySelector(".btn-hero:hover") 是一个合适的选择器，但由于 Javascript 的异步性质，hover[=54= 纯属偶然] 会在 JS 函数运行时被捕获。这就是函数 returns NULL.
的原因

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

CSS

我觉得还可以。

你的问题

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

Answer 5

因此您希望每个按钮的点击都稍微改变一下背景。我不明白你的十六进制点，但这是一个脚本，它根据给定的数值计算背景颜色。在这种情况下，它的属性 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:

编辑

根据评论中提供的附加信息，我们计算出您希望在每次单击按钮时更改 hover-background-color。

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

// 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>

使用 javascript 更改悬停背景颜色

Changing hover background color with javascript

javascript

css

hover

回答

例子

参考