入力フィールドでフォーカスしている他の要素から不透明度を変更する方法

Question

入力フィールドの暗い部分でボディをフォーカスし、不透明度を6に設定しようとしています。しかし、私は、入力フィールドが全身のようには見えないようにしたい - それはうまくいきません。

フォーカスの入力フィールドが明るく、残りの部分がすべて暗くなりたいと思っています。

ここに私のコードです：

HTML

<b:navBar position="top" sticky="true" fluid="false" brand="bIg"> 
    <b:navbarLinks pull="left"> 
    <h:form styleClass="navbar-form navbar-left"> 
     <b:inputText placeholder="Suchbegriff" styleClass="inputNavbar"></b:inputText> 
     <b:commandButton look="default" value="suchen" styleClass="btnSearch"></b:commandButton> 
    </h:form> 
    </b:navbarLinks> 
    <b:navbarLinks pull="right"> 
     <b:dropMenu value="" iconAwesome="fa-user"> 
      <b:navLink value="Profil bearbeiten"></b:navLink> 
      <b:navLink></b:navLink> 
      <b:navLink value="Abmelden" styleClass="logoutLink"></b:navLink> 
     </b:dropMenu> 
     <b:dropMenu value="" iconAwesome="fa-wrench"> 
      <b:navLink value="Einstellungen"></b:navLink> 
     </b:dropMenu> 
    </b:navbarLinks> 
</b:navBar> 

CSS

body.dark { 
    background-color: #333; 
    opacity: 0.6; 
} 

JS

$(function() { 
    $('.inputNavbar').on('focus', function() { 
    $('body').not(this).addClass('dark'); 
    }); 

$('.inputNavbar').on('blur', function() { 
    $('body').not(this).removeClass('dark'); 
}); 
}); 

Answer 1

$(document).ready(function(){ 
 
    $('.inputNavbar').on('focus', function() { 
 
    
 
     if(!$('body').hasClass('dark')) 
 
     { 
 
      $('body').removeClass(); 
 
      $('body').addClass('dark'); 
 
      } 
 

 
    }); 
 

 
$('.inputNavbar').on('blur', function() { 
 
     if($('body').hasClass('dark')) 
 
     { 
 
      $('body').removeClass(); 
 
      $('body').addClass('Undark'); 
 
     
 
     } 
 
}); 
 
});

body.dark { 
 
    background-color: #333; 
 
    opacity: 1; 
 
} 
 
body.Undark { 
 
    background-color: #fff; 
 
    opacity: 0.6; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
     <input type="text" placeholder="Suchbegriff" class="inputNavbar"/> 
 
     <input type="button" look="default" value="suchen"/>