使用 javascript 更改 hover 背景顏色

Question

我想訪問按鈕的 hover 背景顏色，以在每次單擊按鈕時更改 hover 背景顏色。

這是 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'

});

這會更改按鈕顏色，但會否定 hover 屬性。

我嘗試在 app.js 中這樣做：

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

但這會返回 null。

有沒有辦法從 app.js 文件中的 css 文件訪問 hover 屬性？

Answer 1

您發布的片段在 JS 和 HTML 中都包含一些錯誤：

HTML

• <button class="btn-hero" id="btn">click me</button>不應包含:hover因為這是一個 CSS 偽選擇器（在這種情況下連接到btn-hero ）並且應該只用於 ZE0542F579DF8C56C3Z6058F （或由 Javascript 引用）。 刪除btn-hero:hover 。

Javascript

• 如果要“捕獲”元素 hover 事件，則需要將 eventListener （在 hover mouseover或mouseenter的情況下）附加到按鈕

• 雖然document.querySelector(".btn-hero:hover")是一個合適的選擇器，但由於 Javascript 的異步特性，當 JS ZC1C4145268E68394557 運行時hover將被捕獲純屬偶然這就是 function 返回 NULL 的原因。

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

CSS

對我來說似乎沒問題。

你的問題

請確保您了解顏色的十六進制值本質上不是一個長的十六進制值，而是 3 個十六進制值的串聯，類似於 R,G,B，每個值由 2 個十六進制數字組成。 將 100hex 添加到任何 #xxxxxx（6 位）顏色會得到相當意想不到的結果。 你想改變三個（R，G，B）中的哪一個？

Answer 2

因此，您希望每個按鈕單擊以稍微更改背景。 我不明白你的十六進制點，但這是其中一個腳本，它根據給定的數值計算背景顏色。 在這種情況下，它的屬性data-colorvalue

我對其進行了修改以適合您的情況並使其每次單擊增加 10 個。 你可以在這里玩數學，這樣你會得到不同的 colors：

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

如果您想將 hover 更改為偽，那么您需要魔法。 那是一個完全獨立的問題。

您的標題顯示文本顏色和問題背景顏色。 因此，如果您想更改文本/字體顏色，您只需使用btn.style.color而不是 backgroundColor。

Psedo 類不會像這樣從 go 到您的 html ：

編輯

根據評論中提供的其他信息，我們計算出，您希望每次單擊按鈕時都更改懸停背景顏色。

這是一個非常奇怪的情況和奇怪的要求。 但其中一種方法是在每次點擊時制作新的樣式元素內容，如下所示：

 // 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：鼠標懸停事件

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;
}

只使用焦點