懸停時更改不透明度不起作用

我想在將鼠標懸停在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

懸停時更改不透明度不起作用

回答

相關問題