1. ホーム
  2. 質問と答え
  3. ホバリング中に背景を薄くする

ホバリング中に背景を薄くする

2016-06-13 7 views
0

申し訳ありません複製していても、実際には一点で立ち往生しています。ホバリング中に背景を薄くする

divがホバリングしているときにすべての背景がフェードしていることを達成したいと思います。すべての背景 - 上に表示されるホバリング部門の横にあるサイトのすべてを意味します。 divがホバリングしているときは、すべての背景をクリアして戻ってください。 https://jsfiddle.net/ryfgwswo/1/

出典

2016-06-13 Katerina

+0

ようこそ：ここ

<body> <div class="block1"> <div id="text"> one </div> </div> <div class="block"> <div id="text"> two </div> </div> <div class="background"> </div> </body>

は、コードです！具体的な問題を明確にしたり、詳細を追加して必要なものを正確に強調してください。現在書かれているとおり、あなたが求めていることを正確に伝えるのは難しいです。 –

+0

実装したいことは、「モーダルウィンドウ」と呼ばれます。シンプルなw3Schoolもあなたを案内しますhttp://www.w3schools.com/howto/howto_css_modals.asp正確にあなたが望んでいないかどうかコメントしてください –

答えて

0

あなた：私を助け:)

<body> 
<div class="block1"> 
<div id="text"> 
    one 
</div> 
</div> 
<div class="block"> 
    <div id="text"> 
     two 
    </div> 
</div> 
</body>

を取り付けるJSFiddle - そうしてください..私が望む限り何も動作 -

は、多分それはそれを達成するための簡単な方法ですが、私を信じてこのようにしたいですか？

body,html { 
 
    margin: 0; 
 
    padding: 0; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
#text { 
 
\t text-align: center; 
 
\t padding: 20px; 
 
\t color: #cfcaca; 
 
} 
 

 
.block1 { 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t background: black; 
 
\t border: 2px solid #cfcaca; 
 
\t margin: 100px 100px; 
 
\t -moz-box-shadow: 0 0 1px #4e4848; 
 
\t box-shadow: 0 0 1px #4e4848; 
 
\t position: absolute; 
 
\t display: block; 
 
\t transition: 2s all ease-in-out; 
 
} 
 

 
.block1:hover { 
 
\t width: 500px; 
 
\t height: 500px; 
 
\t margin: 0 auto; 
 
\t background:rgba(0,0,0,0.4); 
 
\t border: 2px solid #cfcaca; 
 
\t -moz-box-shadow: 0 0 1px #4e4848; 
 
\t box-shadow: 0 0 1px #4e4848; 
 
\t display: block; 
 
\t z-index: 100; 
 
} 
 

 
.block { 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t background: #000; 
 
\t border: 2px solid #cfcaca; 
 
\t margin: 100px 300px; 
 
\t -moz-box-shadow: 0 0 1px #4e4848; 
 
\t box-shadow: 0 0 1px #4e4848; 
 
\t transition: 2s all ease-in-out; 
 
\t position: absolute; 
 
\t display: block; 
 
} 
 

 
.block:hover { 
 
\t width: 300px; 
 
\t height: 300x; 
 
\t margin: 100 auto; 
 
\t background: rgba(0,0,0,0.4); 
 
\t border: 2px solid #cfcaca; 
 
\t -moz-box-shadow: 0 0 1px #4e4848; 
 
\t box-shadow: 0 0 1px #4e4848; 
 
\t display: block; 
 
\t z-index: 101; 
 
}
<body> 
 
    <div class="block1"> 
 
    <div id="text"> 
 
     one 
 
    </div> 
 
    </div> 
 
    <div class="block"> 
 
\t \t <div id="text"> 
 
\t \t \t two 
 
\t \t </div> 
 

 
</div> 
 
</body>

出典

2016-06-13 11:45:43

+0

実際には、私は逆になることを望みます。より具体的に - divは明確にする必要がありますが、ページ上の他のものは消えるべきです。 – Katerina

0

別のdivのホバー効果を適用するには、第二のdivはHTMLで二来ている必要があります。

body内にあるdivを作成しただけですが、 "block1"と "block"の後にdivを作成し、背景色と不透明度の切り替えを適用しました。

.background { 
    height: 100%; 
    width: 100%; 
    opacity: 1; 
    background-color: rgb(255,0,255); 
} 

.block:hover + .background { 
    opacity: 0; 
    transition: 2s all ease-in-out; 
} 
.block1:hover ~ .background { 
    opacity: 0; 
    transition: 2s all ease-in-out; 
}

そしてHTML：スタックオーバーフローへ https://jsfiddle.net/ryfgwswo/4/

出典

2016-06-13 12:28:35

+0

私はおそらく私の問題を十分に特定していません。 divをすべてクリアしたいが、すべてのページを後で消したい。あなたの例では、ピンクの背景が消えるはずですが、私はdiv 1またはdiv 2をホバリングしています。 – Katerina

+0

その場合、簡単です。 div 1に2番目のホバー効果を追加するだけです（私の例を見て、私はそれを更新しました）。それがあなたが望むものでないなら、私はあなたの問題を正しく理解していません。 https://jsfiddle.net/ryfgwswo/4/ –

+0

これは単純な例です。バックグラウンドのdivをスタティックとして使用できるからです。他の部門についてはどうですか？ （私はIMGやテキストのような意味です）メインのdivが入ったり出たりしている間に表示されなければなりませんが、私もそれらを消したいです。 CSSで可能ですか？代わりにjavascriptを使うべきですか？確かに、私はCSSを使用したいと思います。私はまた、新しいdiv（main）を新しい背景として使用しようとしましたが、この例ではdivをONEと呼んでいます。しかし、彼らは協力することはできません - cssでは "+"も "〜"も、それらの間で休止することもありません。 – Katerina

関連する問題

 関連する問題