divとdarkerの背景を強調表示

Question

私はサイトを作成していますが、私が立ち往生して以来、私は助けが必要です。

divを作成したいと思います。ユーザーがその上をクリックするか、クリックするとハイライト表示されます。たとえば、私たちが新しい投稿を書くときにFacebook上で。

私はサイトをdiv要素に「集中」されているかのように背景が暗くなりたい：

は、ここに私の考えを示した写真です。

ありがとうございました。

Answer 1

この場合、CSSセレクタを使用することをお勧めします。 :hoverセレクタは、要素にスタイリングを追加するために使用されます。 idのように '要素'

#element { background : white; } 

#element:hover { background : red; } 

このようにして、ユーザーが要素の上にマウスを置くと、背景が変わります。

他の方法は次のように、あなたの要素にonmouseoverとonmouseoutメソッドを実装している：

<button id="element" onmouseover="mouseover()" onmouseout="mouseout()"> 

およびそれらのメソッドを宣言するためにJavaScriptを使用して、次のように：

function mouseover() 
{ 
    document.getElementById('element').style.backgroundColor = "red"; 
} 

function mouseout() 
{ 
    document.getElementById('element').style.backgroundColor = "white"; 
} 

それとも、同様にそれを解決することができますが、 jQueryで簡単に。

しかし、これは難しい方法です。セレクタについて詳しくはhere、onmouseoverについてはhereを、簡単にjQueryを学ぶのはhereです。

Egyébként：bojlereladó。 :)

Answer 2

Sooooまず、 これらはJavaScript（jQuery）とCSSの基本です。 ここで重要な要素は、

でz屈折率

z屈折率は、要素の表示レベルを設定された値です。最も重い要素は他の要素を支配し重なります。

最初に、ホバーする要素（「要素」という名前）が必要です。

<div id="element">Click</div> 

次に、ダークゾーンの背景が必要です。そこに行く！

<div id="popup"> 
</div> 

CSS：

#popup { 
background-color: rgba(0, 0, 0, .5); 
position: fixed; 
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
display: none; 
z-index: 98; 
} 

#element { 
position: relative; 
background-color: #FFF; 
height: 100px; 
width: 300px; 
margin: auto; 
z-index: 99; 
} 

#popup:hover { 
display: none; 
} 

jQueryの（ライブラリ）：

$("#element").on("mouseover", function(){ 
$("#popup").show(); 
}).on("mouseout", function(){ 
$("#popup").hide(); 
}); 

https://jsfiddle.net/9aueqsfr/