css - 悬停时更改不透明度不起作用

Question

我想将鼠标悬停在十字 (.cross) 上时将其不透明度更改为 0.9。 将鼠标悬停在图像周围的 div 上时将不透明度更改为 0.3，但更改为 0.9 无效

https://dl.dropboxusercontent.com/u/12598822/midori.html

.cross {
    display: block;
    width: 12px;
    height: 12px;
    top: 10px;
    right: 10px;
    background: url(close.svg);
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

div.shortcut .preview:hover > #crosshidden {
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 150ms;
    opacity: 0.3;
    display: block;
}

.cross:hover > #crosshidden {
    opacity: 0.9;
    display: block;
}

Answer 1

使用 Google Chrome 开发者工具我注意到你的 "div.shortcut .preview:hover > #crosshidden" CSS block 比 ".cross:hover > #crosshidden".

一个合适的解决方案是将后面的 block 替换为:

div.shortcut .preview:hover > #crosshidden:hover {
    opacity: 0.9;
}