css - 鼠标悬停拾色器时更改产品颜色

Question

我正在使用wordpress + woocomerce。

当鼠标悬停它以匹配产品颜色时，我需要更改变体的颜色。
我目前看到所有蓝色的变化（这是主题的原色）

.woocommerce .owl-theme .owl-controls .owl-page.active span,
.woocommerce .owl-theme .owl-controls .owl-page span:hover,
.noo_countdown .custom_link:hover,
.noo_countdown .custom_link:focus,
.noo_countdown.noo_countdown_left .noo_countdown_content .custom_link:hover,
.noo_countdown.noo_countdown_left .noo_countdown_content .custom_link:focus,
.woocommerce-cart table.cart td.actions .continue,
.woocommerce-cart table.cart td.actions .empty-cart:hover,
.woocommerce-cart table.cart td.actions .continue:hover,
.woocommerce-cart table.cart td.actions .button:hover,
body .vc_tta-color-grey.vc_tta-style-classic.vc_tta-tabs .vc_tta-tabs-list .vc_tta-tab.vc_active>a: border-color:#4666a3,}

<div class="noo-product-thumbnail">
<div class="noo-product-meta">
<span data-id="3501" class="noo-quick-view icon_zoom-in_alt"></span>
</div>
<div class="noo-product-slider owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer autoHeight" style="height: 177px;"><div class="owl-wrapper" style="width: 954px; left: 0px; display: block; transition: all 0ms ease 0s; transform: translate3d(0px, 0px, 0px);"><div class="owl-item active" style="width: 159px;"><a href="https://prueba.soygorrion.com.ar/tienda/rinoneras/rinonera-rosal-grande/" class="hover-device"><br>
<img width="300" height="300" src="https://prueba.soygorrion.com.ar/wp-content/uploads/2019/02/riñogrande7-650x650.jpg" class="product-one-thumb" alt="" srcset="https://prueba.soygorrion.com.ar/wp-content/uploads/2019/02/riñogrande7-650x650.jpg 650w, https://prueba.soygorrion.com.ar/wp-content/uploads/2019/02/riñogrande7-150x150.jpg 150w, https://prueba.soygorrion.com.ar/wp-content/uploads/2019/02/riñogrande7-32x32.jpg 32w, https://prueba.soygorrion.com.ar/wp-content/uploads/2019/02/riñogrande7-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">  
</a></div><div class="owl-item" style="width: 159px;"><br></div><div class="owl-item" style="width: 159px;"><a href="https://prueba.soygorrion.com.ar/tienda/rinoneras/rinonera-rosal-grande/" class="hover-device"><br>
<img width="300" height="300" src="https://prueba.soygorrion.com.ar/wp-content/uploads/2019/02/riñogrande7-650x650.jpg" class="product-one-thumb" alt="" srcset="https://prueba.soygorrion.com.ar/wp-content/uploads/2019/02/riñogrande7-650x650.jpg 650w, https://prueba.soygorrion.com.ar/wp-content/uploads/2019/02/riñogrande7-150x150.jpg 150w, https://prueba.soygorrion.com.ar/wp-content/uploads/2019/02/riñogrande7-32x32.jpg 32w, https://prueba.soygorrion.com.ar/wp-content/uploads/2019/02/riñogrande7-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">  </a></div></div></div>
<div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div></div></div></div>

Answer 1

将其添加到您的产品页面即可：

(function($) {
  $('#pa_color_buttons a[rel="pa_color"]').on('click', function() {
    const backgroundColor = $('span', this).css('background-color');
    $('.single_add_to_cart_button', $(this).closest('form')).css({
      backgroundColor
    });
  })
})(jQuery);

请注意，这将使用内联样式直接在按钮上应用 background-color值（因为没有简单的CSS方式）。如果仍然希望将悬停状态设置为浅灰色，则需要使用 !important覆盖JS应用的颜色：

.woocommerce div.product div.entry-summary form.cart .button:hover {
   background: #2f456d !important;
}

或者，您可以通过将上面的CSS替换为：来稍微更改不透明度：

.woocommerce div.product div.entry-summary form.cart .button:hover {
   opacity: .75;
}

最后但并非最不重要的一点是，您的主题似乎有些粗糙。我显然不同意 noo.css:11120，我将其替换为：

@media (min-width: 480px) {
  .woocommerce div.product.product-type-variable div.entry-summary .variations_form 
  .single_variation_wrap {
    position: relative;
  }
}