Question

因此，当我将鼠标悬停在图像上时，它会让它变得更加黑暗。我尝试过使用css但不起作用。

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

Answer 1

只有将叠加设置添加到position: fixed和display:none，才能使用CSS执行此操作。将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;
}

<强> HTML

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

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

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

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

FIDDLE

<强>更新

以下是我的代码与你的小提琴的演示：

<强> CSS

.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

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

NEW FIDDLE

Answer 2

Jquery Hover Documentation

Jquery Animation Documentation

Jquery Css Documentation

使用此方法，您可以使用jquery css在悬停时更改元素的不透明度和背景颜色，从而使元素变暗。

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

http://jsfiddle.net/49Qvm/28/

$('ul').hover(function(){
    $('#darkness').fadeTo(200, 1);
}, function(){
     $('#darkness').fadeTo(200, 0, function(){
         $(this).hide();
     });
});

将鼠标悬停在图像上方时，背景会变暗

2 个答案: