I have html code as follows:

```
<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>

```

I want to add `hover` and `focus` effect with jquery.

The css that i have is as follows:

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

```

And jquery for hover is as follows:

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

```

And it works, but I want to do the same on focus. 

Thus I want that span with `.input-group-text` class and input with id `contact-email` get `border: 1px solid blue`

I tried with:

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

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

```

But nothing happens.

Any idea?