0

<div>いくつかの便利なHTMLコンポーネント/画像でカバーして<div>：を作成する方法を考えています。

  • A）クリック不可（マウスなどでは到達不能）
  • B）少し〜0.3fのぼかしを見てください（前景が透明であるため）
  • C）効果を動的にするつまり<div>、何らかのイベントでカバー/カバーを解除するということですか？

だから私の質問は：HTML、CSS、Javascriptで前述の効果を出すための最適な方法は何ですか？

4

1 に答える 1

0

（A）divを「クリック不可（マウスなどでは到達不能）」にする

これは、さまざまなCSSポジショニング要素を使用して、2つのdivをまったく同じ場所に配置することで実現できます。次に、一方のdivをもう一方のdivの上にスタックするには、を使用しますz-index（高い方z-indexの要素が低い方の要素の上にスタックされますz-index）。例えば：

HTML：

<div id="div1">
    <a href="#">Link</a>
</div>
<div id="div2"></div>

CSS：

#div1, #div2 {
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    position: fixed;
}

#div2 {
    z-index: 1;
}

（B）divを作成する「前景が透明であるため、約0.3fのぼかしを少し見てください」

これを行うには、CSSを使用しますopacity。例えば：

#div2 {
    opacity: .3;
}

（C）「効果を動的にする、つまり、あるイベントによってカバーされる/カバーされないようにする」。

これは、Javascriptを使用して実現できます。最も簡単なアプローチは、おそらく、削除するdivdocument.getElementByIdに追加するために使用することです。display:none

<script>
  document.getElementById('div2').style.display = 'none';
</script>

注：このタスクを実行する方法はこれらだけではありません。私はあなたに出発点を与えようとしているだけです。私が投稿したMDNリンクを確認し、具体的に達成しようとしていることに最適なコードを作成することをお勧めします。

于 2013-02-01T19:30:33.340 に答える