jquery - 悬停时保持CSS3悬停状态

当用户单击输入字段而不是返回到问号时，我试图将放大的镜头保持在悬停状态。我已经尝试了以下jQuery，但它似乎不起作用：

    $(".srchbtn").on("mouseover", function() {
    $(".srchbtn").addClass('hover');
    });

这是CodePen的链接：http://cdpn.io/hcadj

最佳答案

您提到您希望您的操作在“用户单击时”发生，但将处理程序绑定到mouseover事件而不是click
您将名称为hover的类添加到元素，但是没有使用该类的规则。

因此，尝试将您的CSS规则更改为

.srchbtn:hover,
.srchbtn.hover{ /*add this line and the comma in the previous one*/
  /*your properties here*/
 }

（您甚至可能要将第一个选择器更改为.search:hover .srchbtn）

并将您的脚本更改为

$(".srchbtn").one("click", function() {
    $(".srchbtn").addClass('hover');
});