Javascript 将鼠标悬停在图像上时使背景变暗

所以我试着让它成为这样，当我在一个图像上悬停时，它会使周围的一切变得更暗。我尝试过使用css，但不起作用

---

这是我的代码：jsfiddle.net/vkq09wga/5/

你只需在CSS中添加一个覆盖集到

位置：fixed

和

显示：none

。将您的

img

设置为

position:relative

（以便您可以应用订单），并设置一个比覆盖更高的

z-index

。只要覆盖是您的

img

的兄弟或后代，您就可以在

：hover

上显示它：

CSS

.overlay{
    display:none;
    background: rgba(0,0,0,.7); //opaque background
    width: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

img{
    position: relative;
    z-index: 2;
}

img:hover ~ .overlay{
    display:block;
}

.overlay{
    display:none;
    background: rgba(0,0,0,.7);
    width: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.image img{
    position: relative;
    z-index: 2;
}

.image img:hover + .overlay{
    display:block;
}

HTML

<p>Lorem Ipsum...</p>

<img src="http://www.placecage.com/200/200"/>

<p>Lorem Ipsum...</p>

<div class="overlay"></div>

<h1>Title</h1>
<div class="image">
    <h3><center>TITLE OF IMAGE</center></h3>
    <img src="..." alt="Image" height="315px" width="100%"/>
    <div class="overlay"></div>
</div>
<div class="image">
    <h3><center>TITLE</center></h3>
    <img src="..." alt="Image" height="315px" width="100%"/>
    <div class="overlay"></div>
</div>

HTML

<p>Lorem Ipsum...</p>

<img src="http://www.placecage.com/200/200"/>

<p>Lorem Ipsum...</p>

<div class="overlay"></div>

<h1>Title</h1>
<div class="image">
    <h3><center>TITLE OF IMAGE</center></h3>
    <img src="..." alt="Image" height="315px" width="100%"/>
    <div class="overlay"></div>
</div>
<div class="image">
    <h3><center>TITLE</center></h3>
    <img src="..." alt="Image" height="315px" width="100%"/>
    <div class="overlay"></div>
</div>

标题
图像标题
标题

通过使用jquery css更改悬停时元素的不透明度和背景色，可以设置元素变暗的动画

这把小提琴似乎正是你想要的：

---

你能显示你的HTML和CSS吗？CSS不起作用？Ó.ò与论坛网站不同，我们不使用“感谢”或“感谢任何帮助”或签名。请看“.顺便说一句，这是“提前感谢”，而不是“提前感谢”。还有其他的吗？那么整个页面？