タッチUIダイアログのテキストフィールドの色を変更しようとしています

Question

テキストフィールドのIDは "colormeup"です。しかし、これは働いていないようです。イベントはテキストフィールドに縛られていません。

以下は、clientlibのjsコードです。

(function (document) { 
 
     var $form = $(document).find("form.foundation-form"); 
 
     var $in = $form.find("#colormeup"); 
 
     $in.mouseenter(function(){ 
 
      $(this).css("border", "1px solid #861bc4"); 
 
     }); 
 
})(document);

<form action="/content/validator/_jcr_content/Body/colorcheck" method="post" class="coral-Form coral-Text cq-dialog foundation-form content foundation-layout-form cq-dialog-floating coral-Form--aligned coral--dark" data-cq-dialog-pageeditor="/editor.html/content/validator.html" data-foundation-form-ajax="true" style="top: 11.25px; left: 402.5px;"> 
 

 
<div class="cq-dialog-content coral-TabPanel coral-TabPanel--large" data-init="tabs"> 
 
<nav class="coral-TabPanel-navigation" role="tablist"> 
 
<a class="coral-TabPanel-tab is-active" href="#" data-toggle="tab" role="tab" tabindex="0" aria-selected="true" aria-controls="coral-84" aria-disabled="false">InfoValidator</a></nav> 
 
\t <div class="coral-TabPanel-content"><section class="coral-TabPanel-pane coral-FixedColumn foundation-layout-util-vmargin is-active" id="coral-84" role="tabpanel" aria-hidden="false"> 
 
<div class="coral-FixedColumn-column"> 
 
<div class="coral-Form-fieldwrapper"> 
 
<label class="coral-Form-fieldlabel">Email</label> 
 
<input class="coral-Form-field coral-Textfield" id="colormeup" data-rootpath="/content/dam/barclays" type="text" name="./email" value="xxxxx@gmail.com" data-validation=""> 
 
<span class="coral-Form-fieldinfo coral-Icon coral-Icon--infoCircle coral-Icon--sizeS" data-init="quicktip" data-quicktip-type="info" data-quicktip-arrow="right" data-quicktip-content="Enter Email Id" aria-label="Enter Email Id" tabindex="0"></span></div></div> 
 

 

 
</section> 
 

 

 
</div></div> 
 

 
</form>

Answer 1

findの代わりclosestで試してみてください。親要素とclosestターゲット、documentあなたは、CSSやborder:1px solid color .Withoutのようなjsファイルでは境界線の範囲を定義することができ、親.ANDもう一つは言及範囲border-color見えない

の作業例

を持っていません

(function(document) { 
 
    var $form = $(document).find("form.foundation-form"); 
 
    var $in = $form.find("#colormeup"); 
 
    $in.mouseenter(function() { 
 
    $(this).css("border", "1px solid #861bc4"); 
 
    }); 
 
})(document);

#colormeup { 
 
    border: 1px solid #222; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="/content/validator/_jcr_content/Body/colorcheck" method="post" class="coral-Form coral-Text cq-dialog foundation-form content foundation-layout-form cq-dialog-floating coral-Form--aligned coral--dark" data-cq-dialog-pageeditor="/editor.html/content/validator.html" 
 
    data-foundation-form-ajax="true" style="top: 11.25px; left: 402.5px;"> 
 

 
    <div class="cq-dialog-content coral-TabPanel coral-TabPanel--large" data-init="tabs"> 
 
    <nav class="coral-TabPanel-navigation" role="tablist"> 
 
     <a class="coral-TabPanel-tab is-active" href="#" data-toggle="tab" role="tab" tabindex="0" aria-selected="true" aria-controls="coral-84" aria-disabled="false">InfoValidator</a></nav> 
 
    <div class="coral-TabPanel-content"> 
 
     <section class="coral-TabPanel-pane coral-FixedColumn foundation-layout-util-vmargin is-active" id="coral-84" role="tabpanel" aria-hidden="false"> 
 
     <div class="coral-FixedColumn-column"> 
 
      <div class="coral-Form-fieldwrapper"> 
 
      <label class="coral-Form-fieldlabel">Email</label> 
 
      <input class="coral-Form-field coral-Textfield" id="colormeup" data-rootpath="/content/dam/barclays" type="text" name="./email" value="xxxxx@gmail.com" data-validation=""> 
 
      <span class="coral-Form-fieldinfo coral-Icon coral-Icon--infoCircle coral-Icon--sizeS" data-init="quicktip" data-quicktip-type="info" data-quicktip-arrow="right" data-quicktip-content="Enter Email Id" aria-label="Enter Email Id" tabindex="0"></span></div> 
 
     </div> 
 

 

 
     </section> 
 

 

 
    </div> 
 
    </div> 
 

 
</form>

それとも単にあなたはcss hover

で使用することができます3210

#colormeup{ 
 

 
} 
 
#colormeup:hover{ 
 
border:1px solid red; 
 
}

<form action="/content/validator/_jcr_content/Body/colorcheck" method="post" class="coral-Form coral-Text cq-dialog foundation-form content foundation-layout-form cq-dialog-floating coral-Form--aligned coral--dark" data-cq-dialog-pageeditor="/editor.html/content/validator.html" 
 
    data-foundation-form-ajax="true" style="top: 11.25px; left: 402.5px;"> 
 

 
    <div class="cq-dialog-content coral-TabPanel coral-TabPanel--large" data-init="tabs"> 
 
    <nav class="coral-TabPanel-navigation" role="tablist"> 
 
     <a class="coral-TabPanel-tab is-active" href="#" data-toggle="tab" role="tab" tabindex="0" aria-selected="true" aria-controls="coral-84" aria-disabled="false">InfoValidator</a></nav> 
 
    <div class="coral-TabPanel-content"> 
 
     <section class="coral-TabPanel-pane coral-FixedColumn foundation-layout-util-vmargin is-active" id="coral-84" role="tabpanel" aria-hidden="false"> 
 
     <div class="coral-FixedColumn-column"> 
 
      <div class="coral-Form-fieldwrapper"> 
 
      <label class="coral-Form-fieldlabel">Email</label> 
 
      <input class="coral-Form-field coral-Textfield" id="colormeup" data-rootpath="/content/dam/barclays" type="text" name="./email" value="xxxxx@gmail.com" data-validation=""> 
 
      <span class="coral-Form-fieldinfo coral-Icon coral-Icon--infoCircle coral-Icon--sizeS" data-init="quicktip" data-quicktip-type="info" data-quicktip-arrow="right" data-quicktip-content="Enter Email Id" aria-label="Enter Email Id" tabindex="0"></span></div> 
 
     </div> 
 

 

 
     </section> 
 

 

 
    </div> 
 
    </div> 
 

 
</form>