突出显示div和深色背景

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：bojlereldó。 ：）

Answer 2

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

  

z索引

z-index是设置元素显示级别的值。最重要的元素将占据主导地位并与其他元素重叠。

首先，你需要一个你想要悬停的元素 - 命名为＆＃34;元素＆＃34;。

<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/