取消时保持CSS3悬停状态

Question

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

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

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

Answer 1

1. 当用户点击时，你提到你希望你的行动发生＆＃34; 但将处理程序绑定到mouseover事件而不是click
2. 您向该元素添加了一个名为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');
});

http://codepen.io/gpetrioli/pen/IeEmd

演示

Answer 2

1. 问题是CSS。您使用：hover，仅在鼠标悬停时才有效。使用jQuery，你可以使用.mouseenter()表示你输入时应该发生css，但是当你离开时不会消失。

   $（ 'srchbtn'）。的mouseenter（函数（）{    $（本）的CSS（{ “显示”： “块”， “高度”： “10px的”， “宽”： “10px的”}）; }）;

显示：块，高度和宽度只是你只能在mouseenter上输入CSS的例子，但不会消失（你可以使用mouseleave();获得）。

1. 或者，解决问题的另一个选择是使问题字段成为questionmark-div的子项。这样，当您将鼠标悬停在问题字段上时，您在技术上仍然悬停在问号本身上，使CSS仍然应用：悬停状态。

选择其中一个！

重新阅读问题后编辑，您可能想要选择选项2，因为当用户既不关注问号也不关注问题字段时，它将恢复为非：悬停状态。