如何更改輸入字段中其他對焦元素的不透明度

我嘗試使輸入字段中的焦點位置爲焦點，並將不透明度設置爲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; 
}

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

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

來源

2017-07-08 user3541032

不透明度「繼承」，你不能把它放在身上，或其他的父元素，並期望它並不適用於一個子元素等 – adeneo

的[我不想繼承可能的複製從父母在CSS的孩子不透明度]（https://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css） – Gerfried

$(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"/>

來源

2017-07-08 12:58:28

如何更改輸入字段中其他對焦元素的不透明度

回答

相關問題