Javascript 突出显示div和较暗的背景

我正在创建一个网站，但因为我被卡住了，我需要一些帮助

我想创建一个div，当用户将鼠标悬停在它上面或单击它时，它会高亮显示。例如，当我们在Facebook上写一篇新文章时

这是一张说明我想法的图片：

我希望背景是黑暗的，好像该网站是“重点”的div

---

谢谢您的帮助。

我建议您在这个案例中使用CSS选择器。

：hover

选择器用于向元素添加样式。比如id为“element”

#element { background : white; }

#element:hover { background : red; }

这样，当用户悬停在元素上时，背景会发生变化

另一种方法是对元素实现

onmouseover

和

onmouseout

方法，如：

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

或者，您也可以用jQuery来解决类似的问题，但更简单

但这是更难的办法。阅读更多关于选择器、onmouseover的信息，轻松学习jQuery

Egyébként:bojler eladó.）

首先， 这些是JavaScript（jQuery）和CSS的基础。 这里的关键要素是

z指数

z索引是设置元素显示级别的值。最黑的元素将支配和重叠其他元素

首先，您需要一个要悬停的元素-名为“element”

jQuery（库）：

---

你好。欢迎来到StackOverflow。谢谢你的提问，但这不是一个代码编写服务。请提供一份报告。这个问题没有被接受的答案，但是你可以试试答案的代码，如果你仍然有问题，回来问（现在提供一些代码）。

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

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

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

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

#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;
}

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