javascript - 如何使用jquery添加焦点和悬停效果

Question

我的html代码如下:

<div class="form-group g-mb-30">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="icon-envelope"></i></span>
        </div>
        <input id="contact-email"
               class="form-control"
               type="email" placeholder="Email *" style="border-radius: 0;">
    </div>
</div>

我想用 jquery 添加 hover 和 focus 效果。

我的css如下:

.g-state-hover > div span, .g-state-hover input, .g-state-focus > div span, .g-state-focus input{
  border: 1px solid blue;
}

悬停的jquery如下:

$(".input-group").hover(function (e) {
    $(this).addClass("g-state-hover");
}, function () {
    $(this).removeClass("g-state-hover");
});

它有效，但我想在焦点上做同样的事情。

因此我想要 .input-group-text 类的跨度和带有 id contact-email 的输入得到 border: 1px solid blue

我试过:

$("#contact-email").focusin(function (e) {
    $(".input-group").addClass("g-state-focus");
});

$("#contact-email").focusout(function (e) {
    $(".input-group").removeClass("g-state-focus");
});

但是没有任何反应。

有什么想法吗？

Answer 1

尝试使用 $("#contact-email").focusin(function (e) { $(this).parent().addClass("g-state-focus"); });