Wie ändere ich CSS für das äußere Element?

Question

Ich habe eine Seite HTML5 mit zwei Elementeingaben, für E-Mail und Passwort. Ich möchte Folgendes tun:

1.- Wenn ich die Eingabe-E-Mail fokussierte, möchte ich CSS-Stil zum Tag-Element b hinzufügen.
2.- Wenn ich das Eingabe-Passwort fokussierte, möchte ich CSS-Stil zum Tag-Element b hinzufügen.

ist möglich?

Dank

Dies ist mein Code:

CSS:

input.dx-texteditor-input:focus + .tooltip 
{ 
    opacity: 1; 
}    
input.dx-texteditor-input: focus + .tooltip-top-right 
{ 
    right: 0; 
    left: auto; 
    margin-bottom: 5px; 
} 

HTML:

<label class="input"> 
    <i class="icon-append fa fa-lock" style="z-index: 1"></i> 
    <div class="dx-texteditor dx-texteditor-empty dx-show-clear-button dx-widget dx-textbox"> 
     <div class="dx-texteditor-container"> 
      <input class="dx-texteditor-input" name="email" type="email"> 
      <div class="dx-placeholder"></div> 
      <div class="dx-texteditor-buttons-container"> 
       <span class="dx-clear-button-area" onclick="void(0)"> 
        <span class="dx-icon dx-icon-clear"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <b class="tooltip tooltip-top-right" style="opacity:0"> 
     <i class="fa fa-user txt-color-teal"></i> Please enter email address/username 
    </b> 
</label> 



<label class="input"> 
    <i class="icon-append fa fa-lock" style="z-index: 1"></i> 
    <div class="dx-texteditor dx-texteditor-empty dx-show-clear-button dx-widget dx-textbox"> 
     <div class="dx-texteditor-container"> 
      <input class="dx-texteditor-input" name="email" type="email"> 
      <div class="dx-placeholder"></div> 
      <div class="dx-texteditor-buttons-container"> 
       <span class="dx-clear-button-area" onclick="void(0)"> 
        <span class="dx-icon dx-icon-clear"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <b class="tooltip tooltip-top-right" style="opacity:0"> 
     <i class="fa fa-lock txt-color-teal"></i> Enter password 
    </b> 
</label> 

Answer 1

Vielleicht können Sie Jquery Selektoren wie folgt verwenden.

$(".form input").focus(function() { 
    $(".form b").css("color","red"); 
}); 

https://jsfiddle.net/5zbsbrp7/

Oder verwenden Sie nur css

input:focus + b { 
    color: red 
} 

https://jsfiddle.net/041jsrew/