如何修改product-button的hover样式？能否用原生JS替代jQuery？

以下代码来自某视频，版权归原作者所有。

原始JS代码： #

$(".product-colors span").click(function(){ 
  $(".product-colors span").removeClass("active"); 
  $(this).addClass("active"); 
  $("body").css("background",$(this).attr("data-color")); 
  $("product-price").css("color",$(this).attr("data-color")); 
  $("product-button").css("color",$(this).attr("data-color")); 
  $("product-pic").css("background-image",$(this).attr("data-pic")); 
});

原始HTML代码： #

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
<head> 
  <meta charset="utf-8"> 
  <title></title> 
  <link rel="stylesheet" href="style.css"> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script> 
</head> 
<body> 
  <div class="product-card"> 
    <h1>Title</h1> 
    <p>Thing<p> 
    <div class="product-pic"></div> 
    <div class="product-colors"> 
      <span class="blue active" data-color="#7ed6df" data-pic="url(1.png)"></span> 
      <span class="green" data-color="#badc58" data-pic="url(2.png)"></span> 
      <span class="yellow" data-color="#f9ca24" data-pic="url(3.png)"></span> 
      <span class="rose" data-color="#ff7979" data-pic="url(4.png)"></span> 
    </div> 
    <div class="product-info"> 
      <div class="product-price">1.000.000$ </div> 
      <a href="#" class="product-button">BUY</a> 
    </div> 
  </div> 
</body> 
</html>

没问题！作为HTML/CSS新手，咱们一步步搞定这两个需求：

1. 用原生JavaScript替代jQuery代码 #

原jQuery逻辑很清晰，咱们直接转成原生JS，顺便修复原代码里的小问题：原代码里的$("product-price")这类选择器少了类选择器的.，原生JS里要对应修正。

原生JS代码： #

// 获取所有颜色选项元素
const colorSpans = document.querySelectorAll('.product-colors span');

// 给每个颜色选项绑定点击事件
colorSpans.forEach(span => {
  span.addEventListener('click', function() {
    // 移除所有选项的active类
    colorSpans.forEach(s => s.classList.remove('active'));
    // 给当前点击的选项添加active类
    this.classList.add('active');
    
    // 获取当前颜色的参数
    const activeColor = this.getAttribute('data-color');
    const activePic = this.getAttribute('data-pic');
    
    // 修改页面元素样式
    document.body.style.backgroundColor = activeColor;
    document.querySelector('.product-price').style.color = activeColor;
    document.querySelector('.product-button').style.color = activeColor;
    document.querySelector('.product-pic').style.backgroundImage = activePic;
    
    // 设置CSS变量，用于hover状态切换（后面会用到）
    document.body.style.setProperty('--active-color', activeColor);
  });
});

2. 实现按钮Hover状态的背景样式切换 #

CSS的:hover伪类没法直接用JS修改，最优雅的方式是用CSS变量——先在CSS里定义变量，再通过JS动态更新，hover样式会自动跟着变化。

补充的CSS代码： #

/* 给body定义默认的CSS变量 */
body {
  --active-color: #7ed6df; /* 和第一个蓝色选项默认一致 */
}

/* 按钮hover样式，使用CSS变量 */
.product-button:hover {
  background-color: var(--active-color);
  color: white !important; /* hover时文字变白，提升可读性 */
}

/* 给颜色选项加基础样式，让它们看起来可点击 */
.product-colors span {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  border: 2px solid transparent;
}

.product-colors span.active {
  border-color: #333; /* 选中的颜色选项加边框标识 */
}

/* 给各个颜色选项设置背景色 */
.product-colors .blue { background-color: #7ed6df; }
.product-colors .green { background-color: #badc58; }
.product-colors .yellow { background-color: #f9ca24; }
.product-colors .rose { background-color: #ff7979; }

修改后的完整HTML代码： #

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Product Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="product-card">
    <h1>Title</h1>
    <p>Thing</p>
    <div class="product-pic"></div>
    <div class="product-colors">
      <span class="blue active" data-color="#7ed6df" data-pic="url(1.png)"></span>
      <span class="green" data-color="#badc58" data-pic="url(2.png)"></span>
      <span class="yellow" data-color="#f9ca24" data-pic="url(3.png)"></span>
      <span class="rose" data-color="#ff7979" data-pic="url(4.png)"></span>
    </div>
    <div class="product-info">
      <div class="product-price">1.000.000$ </div>
      <a href="#" class="product-button">BUY</a>
    </div>
  </div>
  <script>
    const colorSpans = document.querySelectorAll('.product-colors span');
    colorSpans.forEach(span => {
      span.addEventListener('click', function() {
        colorSpans.forEach(s => s.classList.remove('active'));
        this.classList.add('active');
        const activeColor = this.getAttribute('data-color');
        const activePic = this.getAttribute('data-pic');
        document.body.style.backgroundColor = activeColor;
        document.querySelector('.product-price').style.color = activeColor;
        document.querySelector('.product-button').style.color = activeColor;
        document.querySelector('.product-pic').style.backgroundImage = activePic;
        document.body.style.setProperty('--active-color', activeColor);
      });
    });
  </script>
</body>
</html>

小提示： #

• 如果把JS放在外部文件，记得把<script>标签改成<script src="script.js"></script>。
• CSS变量的好处是一次修改多处生效，非常适合主题切换场景。
• 原生JS完全能替代jQuery的常用功能，还能避免额外加载库的开销。

内容的提问来源于stack exchange，提问作者user14247653