jqueryを使用してフォームの特定のラベル要素を強調表示するにはどうすればよいですか？

Question

ここで少し助けが必要です。 私はWPサイトにフォームを持っています。 私が達成したいのは、ユーザーが入力フィールド（送信ボタンを除く）の上を移動するとき、この特定のフィールドに付けられた特定のラベルタグも強調表示されるべきです。

今のところ、入力上のホバーアクションが発生したときにすべてのラベルを強調表示することができました。私はそれが何らかの形でここで役割を果たすと知っていますが、私はこの謎を解くことはできません。

助けていただきありがとうございます。多くの先生に感謝します。

<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 your 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 your 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 a 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'}); 
}); 
}); 

Answer 1

使用（ "ラベル"） $(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 your 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 your 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 a 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>

Answer 2

jQueryファンクションclosest()を使用します。

jQuery(".wpcf7-text").closest("label").css({ 'color': '#1e1e1e'}); 

Answer 3

thisは、あなたが上をホバリングしている要素を参照し、あなたができる最も近いですclosest()を使用してくださいセレクタと一致する親を見つける。

jQuery(this).closest("label").css({ 'color': '#1e1e1e'}); 

フィールドとラベルを囲む要素のホバー状態のルールを設定することで、これをCSSで行うこともできます。

p:hover label { 
    color: #1e1e1e; 
}