양식 입력에 초점을 맞추면 웹 사이트 배경이 어두워집니다.

Question

큰 검색 양식과 큰 웹 사이트 배경이있는 웹 사이트가 있습니다. 내 웹 사이트에 대한 아이디어가 있었어. 즉, 검색 양식을 클릭하면 웹 사이트 배경이 흐려집니다. 그런데, 나는 bing.com에서 똑같은 것을 보았다. 나는 CSS를 사용하여 그것을 시도했지만 시도는 아무리해도 실패했다. 어떤 일이 일어날 지 생각해?

업데이트

내 CSS 파일에 지금있다.

#dim {width:100%; opacity:0; background:#000; position:absolute; height:100%;} 

나는 내가 내 양식을 클릭 할 때 JS 코드가 그것을 opacity이 0.5으로 변 만들고 싶어.

다음은 나의 양식 코드입니다.

<form name="searchform" onsubmit="return !!(validateSearch() &amp;&amp; dosearch());"> 
<input type="text" name="searchterms" class="terms" id="terms" placeholder="What are you searching for?"> 
<select name="sengines" class="state" id="state"> 
<option value="" selected>Select a State</option> 
<option value="http://kl.onehomereno.com?s=">Klang Valley</option> 
</select> 

<div class="pad10"></div> 
<input name="Search" type="submit" value="Search" class="button3"> 
</form> 

저는 id가 terms입니다. 따라서 #terms 및 #dim으로 작업하려면 js 코드가 필요합니다. 어떠한 제안?

Answer 1

당신은 폼 요소에 clicks를 수신하고 예를 들어, background

으로 class의 opacity을 변경 자바 스크립트를 사용할 수

편집 :

CSS

.dim { 
background: url("home_page.PNG") no-repeat; 
background-size: cover; 
width: 100%; 
height: 500px; 
opacity: 0; 
} 

HTML

<div class="dim"></div> 
<input type="text" id="term"> 

자바 스크립트

$(document).ready(function() { 
    $('#term').click(function(e) { 
     e.stopPropagation(); 
     $('.dim').css('opacity', '0.5'); 
    }); 
    $(document).on("click", function() { 
     $(this).find('.dim').css('opacity', '0'); 
    }); 
}); 

이 어떻게 작동하는지 당신이 얻을 바랍니다.