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

我想在将鼠标悬停在0.9上时更改十字（.cross）的不透明度。改变不透明度为0.3悬停在一个div周围的图像作品的时候，但没有改变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; 
}

来源

2013-04-24 Alexander Wilms

'.cross：悬停>＃crosshidden'不工作，因为''兼具类cross'的'和ID 'crosshidden'，但没有任何孩子，就像你的孩子combinator所暗示的那样'' – Adrift 2013-04-24 14:23:06

.cross：hover {应该够了，对吧？当我添加一个明显的样式属性，如width：120px;我可以看到悬停起作用，因为背景图像可以多次显示。但不透明度仍然没有改变。 – 2013-04-24 14:27:06

是的'cross：hover'应该足够了..你有可能把你的相关代码放在一个简化的[jsFiddle]（http://jsfiddle.net）中吗？ – Adrift 2013-04-24 14:28:26

使用谷歌Chrome开发者工具我注意到，您的“div.shortcut .preview ：hover> #crosshidden“ CSS块的优先级高于”.cross：hover> #crosshidden“。

的合适的解决方案是更换为后来块：

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

来源

2013-04-24 14:47:21

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

回答

相关问题