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"); });

Answer 2

$(document).ready(function(){
      $(".input-group").hover(function (e) {
        $(this).addClass("g-state-hover");
    }, function () {
        $(this).removeClass("g-state-hover");
    });
    $("#contact-email").focusin(function (e) {
        $(".input-group").addClass("g-state-hover");
    });

    $("#contact-email").focusout(function (e) {
        $(".input-group").removeClass("g-state-hover");
    });
});

.g-state-hover > div span, .g-state-hover input, .g-state-focus > div span, .g-state-focus input{
  border: 1px solid blue;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<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>

也删除box-shadow。

Answer 3

This is running Example When load page focus in your contact-email After you can check hover in out

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<script type="text/javascript">
$(document).ready(function(){

    $("#contact-email").focus();
    $("#contact-email").hover(function(){

        $(this).css('background','red');

    },function(){
        $(this).css('background','white');


    })


})

</script>

如何使用jquery

3 个答案: