Question

您好，我正在创建联系表格，其中包含四个输入名称，即电话，电子邮件，消息，当我单击单个输入时，然后另一个将像电子邮件，电话，消息一样淡出30％，如果我单击另一个，则另一个一个将衰减30％，如果我填充输入，则输入看起来不会衰减。

<div class="contact-form ss-map">
                        <h1>Message</h1>
                        <form action="" method="post" id="validateForm">
                            <div class="form-group error">
                                <input type="text" name="name" id="name" class="form-control" placeholder="Name" required="" area-required="true">
                            </div>
                            <div class="form-group">
                                <input type="text" name="email" id="email" class="form-control" placeholder="Email" required="" area-required="true">
                            </div>
                            <div class="form-group">
                                <input type="text" name="phone" id="phone" class="form-control" placeholder="Phone" required="" area-required="true">
                            </div>
                            <div class="form-group">
                                <input type="text" name="message" id="message" class="form-control" placeholder="Message" required="" area-required="true">
                            </div>
                            <div class="form-group">
                                <a href="#" class="link link-green center submit-btn"><span>Start the conversation</span></a>
                                <!-- <input type="submit" name="submit" value="Start the conversation"> -->
                            </div>
                        </form>
                        <p class="copyright d-none d-sm-block">Copyright @ 2018 JGM</p>
                    </div>

Answer 1

在这里。

将点击输入的opacity设置为1，其他设置为0.7（淡入30％）。

$(".fade-others-on-click").click(function(){
  $(this).css('opacity', '1')
  $(".fade-others-on-click").not($(this)).css('opacity', '0.7')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="fade-others-on-click">
<input class="fade-others-on-click">
<input class="fade-others-on-click">
<input class="fade-others-on-click">

Answer 2

对于这个问题，您可以将CSS :focus选择器与:not选择器组合使用。

如果您想使用示例代码，请发表评论。

联系人表单输入淡出和淡入

2 个答案: