如何更改另一个元素内部元素的不同不透明度

Question

我有一个用:hover改变不透明度的按钮，但里面有一个不应该受按钮不透明度变化影响的图像。

例如，像这样：

.expandIMG:hover{
  opacity: 0.6;
}

.expandIMG:hover,div,img{
  opacity: 1; // this make no opacity but for all the button an i just want    
              // the image that are inside of some div.
}

Answer 1

我认为您正在尝试将包含图像的div的不透明度更改为0.6，同时将图像的不透明度保持为1。

您可以使用background: rgba(0,0,0,1)代替不透明度来完成此操作：

.expandIMG {
    background: rgba(0,0,0,1);
}

.expandIMG:hover{
  background: rgba(0,0,0,0.6);
}

这样，您只需更改div背景的alpha（不透明度），而其中的图像不会受到影响。

示例：http://jsfiddle.net/2krc5080/

Answer 2

您还可以尝试在悬停时将图像的z-index设置得更高。也许this answer也对你有用。

.expandIMG:hover img {

  z-index: 9999; // more than the expandIMG 

}

来吧请给我更多的downvotes !!喂我!!