通过更改不透明度突出显示图像-Highlightanimagebychangingopacity

I have a set of images. Whenever i hover over one i want it to be highlighted by reducing the opacity of the other images. So the image which have the cursor over it will keep its color. I tried it with the below code but it didn't work. What am i doing wrong?

我有一组图像。每当我将鼠标悬停在一个上面时，我希望通过降低其他图像的不透明度来突出显示它。因此，将光标放在其上的图像将保持其颜色。我尝试使用下面的代码，但它没有用。我究竟做错了什么？

HTML:

HTML：

CSS:

CSS：

#first:hover img
{                            /* PARENT HOVER */
    opacity:0.4;  
    cursor: pointer;                    /* Dim all */
}    
#first img:hover
{                            /* SINGLE HOVER */
    opacity: 1;                /* Max one */
    color:#000000;
    cursor: pointer; 
}

2 个解决方案

Code