當懸停圖像，0.5不透明度爲鏈接的圖像和不透明度爲工具欄提示

我想鏈接的行爲時處於懸停狀態時，鏈接將有0.5的不透明度，則提示會出現，但與不透明度爲1.

正如您在照片上看到的那樣，當處於懸停狀態時，鏈接和工具提示的不透明度均爲0.5。

我嘗試添加此：

.tooltip-text:hover{opacity: 1;}

我的猜測是，也許.img_links的不透明度，因爲他們是錨標記元素的一個元素壓倒一切的不透明度與.tooltip文本所做的任何更改？

任何幫助將不勝感激。謝謝。

你可以在這裏粘貼相關的代碼，而不是在屏幕截圖中顯示它？ stacksnippet是首選。 –

你可以創建一個你的問題的jsfiddle嗎？ –

由於工具提示是.img_links的孩子，如果您降低.img_links的不透明度，工具提示永遠不會比它的父級更加不透明。

更換

.img_links:hover { opacity: .5 }

與

.img_links img:hover { opacity: .5 }

或移動提示出img_links容器。

2016-02-28 08:55:55 Tdelang

這也工作。謝謝。 – AMHProgrammer

您可以使用下面的CSS：

.img_links:hover > img { 
    opacity: 0.5; 
}

更換：

.img_links:hover .tooptip-text { 
    visibility: visible; 
    opacity: 1; 
} 

.img_links:hover { 
    opacity: 0.5; 
}

當你的鼠標在圖像或工具提示上，圖像仍然是0.5不透明性與無影響提示。希望這可以幫助你;）

2016-02-28 09:03:22

但.tooltip文本將不可見，因爲它被聲明爲隱藏。我嘗試了您的代碼，但未替換.img_links：hover .tooptip-text { visibility：visible; 不透明度：1; }它工作。謝謝。 – AMHProgrammer

哦，我不知道你之前隱藏了tooltip-text：p很高興你已經解決了這個問題！ –

回答