在悬停时改变不透明度不起作用

Question

当我将鼠标悬停在0.9上时，我想改变十字架的不透明度（.cross）。 将鼠标悬停在图像周围的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

使用谷歌Chrome开发者工具我注意到你的“div.shortcut .preview：hover＆gt; #crosshidden” CSS块优先于“。cross：hover＆gt; #crosshidden “即可。

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

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