How to highlight a specific label element in a form with jquery? -
need bit here. have form on wp site. want achieve is: when user hovers on input field (except submit button), specific label tag attached specific field should highlighted too.
you can see now, managed highlight of labels when hover action on input occurs. know this somehow plays role here, can't manage solve riddle.
will appreciate help! many ahead.
<form action="/wordpress/contact/#wpcf7-f137-o1" method="post" class="wpcf7-form" novalidate="novalidate"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="137" /> <input type="hidden" name="_wpcf7_version" value="4.9" /> <input type="hidden" name="_wpcf7_locale" value="en_us" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f137-o1" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> </div> <p><label> what's name?*<br /> <span class="wpcf7-form-control-wrap your-name"> <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /> </span></label> </p> <p><label> what's email address?*<br /> <span class="wpcf7-form-control-wrap your-email"> <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates- as-required wpcf7-validates-as-email" aria-required="true" aria- invalid="false" /> </span></label> </p> <p><label> please, leave message!*<br /> <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea> </span></label> </p> <p><input type="submit" value="send" class="wpcf7-form-control wpcf7- submit" /></p> <div class="wpcf7-response-output wpcf7-display-none"></div> </form> jquery(function(){ jquery(".wpcf7-text").mouseenter(function(){ jquery(".wpcf7-form").find("label").css({ 'color': '#1e1e1e'}); }); jquery(".wpcf7-text").mouseleave(function(){ jquery(".wpcf7-form").find("label").css({ 'color': '#cacaca'}); }); });
use closest("label")
$(this).closest("label").css({ 'color':'#1e1e1e'});
jquery(function(){ jquery(".wpcf7-text").mouseenter(function(){ $(this).closest("label").css({ 'color': '#1e1e1e'}); }); jquery(".wpcf7-text").mouseleave(function(){ $(this).closest("label").css({ 'color': '#cacaca'}); }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="/wordpress/contact/#wpcf7-f137-o1" method="post" class="wpcf7-form" novalidate="novalidate"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="137" /> <input type="hidden" name="_wpcf7_version" value="4.9" /> <input type="hidden" name="_wpcf7_locale" value="en_us" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f137-o1" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> </div> <p><label> what's name?*<br /> <span class="wpcf7-form-control-wrap your-name"> <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /> </span></label> </p> <p><label> what's email address?*<br /> <span class="wpcf7-form-control-wrap your-email"> <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates- as-required wpcf7-validates-as-email" aria-required="true" aria- invalid="false" /> </span></label> </p> <p><label> please, leave message!*<br /> <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea> </span></label> </p> <p><input type="submit" value="send" class="wpcf7-form-control wpcf7- submit" /></p> <div class="wpcf7-response-output wpcf7-display-none"></div> </form>
Comments
Post a Comment