使用 JavaScript 將類添加到可懸停元素

Question

我有一個按鈕，它在懸停時改變它的顏色。

 const btn = document.querySelector('.btn'); btn.classList.add('green-background');

 .btn { text-decoration: none; background: blue; color: white; font-size: 20px; } .btn:hover { background: magenta; cursor: pointer; } .green-background { background: green; }

 <input class="btn" type="submit" value="Click me" />

我想將它添加到green-background類，以便按鈕在默認狀態下和懸停時也是綠色的。

Answer 1

您可以結合使用兩個選擇,默認和hover 。 有關更多信息，請參閱一個規則上的選擇器組。

 const btn = document.querySelector('.btn'); btn.classList.add('green-background');

 .btn { text-decoration: none; background: blue; color: white; font-size: 20px; } .btn:hover { background: magenta; cursor: pointer; } .green-background:hover,.green-background { background: green; }

 <input class="btn" type="submit" value="Click me" />

Answer 2

您只需要添加一個 css 規則，指定懸停時 .green-background 的樣式，您可以通過為.green-background:hover設置樣式來.green-background:hover

 const btn = document.querySelector('.btn'); btn.classList.add('green-background');

 .btn { text-decoration: none; background: blue; color: white; font-size: 20px; } .btn:hover { background: magenta; cursor: pointer; } .green-background, .green-background:hover { background: green; }

 <input class="btn" type="submit" value="Click me" />

Answer 3

 function changeclass() {
            const btn = document.querySelector('.btn');
            if (!btn.classList.contains('green-background'))
                btn.classList.add('green-background');
            else
                btn.classList.remove('green-background');

        }

<!-- language: lang-css -->

    .btn {
      text-decoration: none;
      background: blue;
      color: white;
      font-size: 20px;
    }

    .btn:hover {
      background: magenta;
      cursor: pointer;
    }

    .green-background, .green-background:hover {
      background: green;
    }

<!-- language: lang-html -->

    <input class="btn" type="submit" value="Click me" onmouseover="changeclass()" onmouseout="changeclass()" />

您詢問了如何通過 Java 腳本添加類：只需將 onmouseover="changeclass()" onmouseout="changeclass()" 事件添加到按鈕和 changeclass 函數中，但您也可以通過與批准的答案相同的 css 來完成。