私は、1つのtextarea要素を持つ単純なHTMLコードを持っています。私はそれをクリックすると、ボディに不透明度0.8を設定し、本文にテキストエリアを表示する必要があります。すべての要素にテキストエリアを表示するには？
これを行う方法？
私が試した：
body {
opacity: 0.8;
z-index: 1
}
textarea {
position:relative:
z-index:100;
}
あなたは本体自体の不透明度を設定した場合は、そのすべての子供たちは、あまりにもそれを取得することが適切に機能するためので、それはあなたが.dimmerを使用して、このようなものを、見なければなりません実際に半透明にする
あなたがチェックし、それが動作しません似た
.dimmer {
position: fixed;
left: 0; top: 0;
right: 0; bottom: 0;
display: none;
background: white;
opacity: 0.8;
z-index: 99; /* immeadiate below textarea */
}
input, textarea {
position: relative;
}
input.use-dimmer:focus,
textarea.use-dimmer:focus {
z-index: 100;
}
input.use-dimmer:focus ~ .dimmer,
textarea.use-dimmer:focus ~ .dimmer {
display: block;
}<p>hello there, this is just a text to show how this work</p>
<textarea class="use-dimmer">sample text</textarea>
<br>
<input class="use-dimmer" value="sample text"/>
<div class="dimmer"></div>私が何を達成しようとしていることtextareaにユーザの注意を集中することであると信じています。だから、あなたはほとんど解決策を持っています。
textarea:focus {
box-shadow: 2px 2px 3px #66dd88, -2px -2px 2px #66dd88;
}この方法では、ユーザーがtextareaをクリックすると次のように離れて（@Andreyフェドロフで述べたように）positionの正しい値を使用してから、あなたは:focus擬似クラスを使用する必要がありますそれはページの残りの部分とは区別されます。 注：あなたがあなたの質問に付けたタグから、あなたはJavascriptを使いたくないと思っていました。
$(document).ready(function() {
$("body").on("focus", "textarea", function() {
$("body").addClass("textareaded");
});
$("body").on("blur", "textarea", function() {
$("body").removeClass("textareaded");
});
});.textareaded .content {
opacity: 0.5;
}
.textareaded textarea {
position: fixed;
top: 10px;
width: 90%;
left: 5%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<textarea></textarea>
@Daramaここにあなたがしなければならない方法があります – LGSon
@Daramaテキストエリアをクリックすると他のすべての要素が半透明になります...そうでない場合は、どのブラウザを使用しますか？ – LGSon