Javascript 悬停时更改“添加到购物车”文本

例如，如果客户尚未选择（必需）选项，是否可以将Woocommerce中的“添加到购物车”按钮更改为“选择大小”。然后，选择该选项后，将其更改回“添加到购物车”吗

manolo blahnik的网站有这个功能，我发现这是一个很好的用户体验。在他们的网站上，第一阶段是“添加到购物车”。
如果有人将鼠标悬停在按钮上方，但尚未选择其选项，则会显示“请选择尺寸”。
但如果有人选择了一个选项，它将保持为“添加到购物车”

在移动设备上，因为没有像pc上那样的悬停，所以它总是显示“请选择一个尺寸”，直到选择该选项，然后它变为“添加到购物车”

我想知道是否有可能与woocommerce合作

---

这只是如何获得结果的CSS部分

    .textSwap::before {
        content: "Add to Cart";
    }
    .textSwap:hover::before {
        content: "Please Select";
    }

.textSwap
{
最小宽度：200px；
}
.textSwap:：之前{
内容：“添加到购物车”；
}
.textSwap:hover:：before{
内容：“请选择”；
}

是，可以更改悬停时的文本。你可以这样做

#购物车btn{
宽度：200px；
背景：#000；
颜色：#fff；
}
#购物车btn：之后{
内容：'添加到袋子'；
}
#购物车btn:悬停：之后{
内容：'请选择大小'；
}

---

您可以在

添加到购物车

按钮上使用

mouseover

和

mouseout

事件处理程序。下面的代码片段演示了该功能

在按钮上方的

鼠标上，检查
必填
表单字段的值，并使用表单字段的
数据警告
属性修改按钮
文本
和
标题

在
mouseout
上，使用按钮上的
数据标题
属性的内容重置按钮
文本
和
标题


//按钮的句柄
var addToCartBtn=document.getElementById（'add-to-cart-button'）；
//“mouseover”事件处理程序
addToCartBtn.addEventListener（'mouseover'，函数（事件）{
//获取所有表单元素
var输入=this.form.elements；
对于（变量i=0；i
.form字段{
利润率：20px；
}
#添加到购物车按钮{
字号：18px；
宽度：200px；
高度：50px；
}

选择大小：
选择一个尺码
小的
中等
大的
选择颜色：
选择一种颜色
红色
绿色
蓝色
加入篮子
当然，这是可能的。您可以使用JS在按钮上添加一个“hover”事件，并根据您的需要执行.thx以获得反馈。但是，如果客户选择了某样东西怎么办？然后它应该停留在“添加到购物车”，因为他们做出了决定