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 块比".cross:hover > #crosshidden"具有更高的优先级。

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

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