懸停至純色背景？

我正試圖在我的網站上實現這種效果，並難以接受如何去做。我的目標是製作一張圖片，當您將鼠標放在它上面時，頂部會顯示純色（像不透明度爲.8）和圖標（和/或文本）。注意：我的圖片也設置爲響應式，所以我不確定這是否會造成問題。示例>>如果點擊下面的鏈接，然後點擊左側的計算機，然後滾動到底部有9個圈子，其懸停效果與我的目標類似。 http://themeforest.net/item/strand-one-page-parallax-bootstrap-template/full_screen_preview/5445825 懸停至純色背景？

任何方向，教程，建議將非常感激！

來源

2013-08-27 Kobaine

聽起來像是[jQuery.hover]（HTTP作業：//api.jquery。 COM /懸停/）。你有沒有嘗試過任何東西？ – Joe

是的，我對這個場景仍然很陌生，所以我不確定什麼是最好的。我玩弄.mouseenter和.fadeIn，但我有點困惑，我需要如何構建HTML，甚至我需要甚至放在那裏。 – Kobaine

@Kobaine你有沒有嘗試我的答案中提到的任何小提琴？我會把代碼放在我的答案中，但那會得到相當長的答案。看一看。 – cjross

我真的不會用javascript來做到這一點。這是解決方案的一個簡單例子。 http://codepen.io/anon/pen/zujBc

這是關鍵概念：

.container:hover .overlay-color { 
    opacity:.5; 
}

獲取顏色覆蓋容器是100％的高度可能在某些版本的IE會非常棘手。位置就是一切。

來源

2013-08-27 04:42:49

您有這種效果的幾個選項，它可能取決於您的具體使用情況。您可以採用優雅退化的僅CSS，使用CSS3屬性transition來動畫元素的opacity。這不僅會在支持的瀏覽器，現代瀏覽器如IE9 +，鉻，FF等

動畫 - >看這jsfiddle

否則，你將不得不使用JavaScript庫如jQuery。要結合一個.hover()或.mouseenter()和.mouseleave()適用.fadeToggle()或.fadeIn()和.fadeOut()。這應該工作跨瀏覽器，只要我認爲你選擇一個jQuery庫小於v2，其中舊的IE瀏覽器支持被刪除。（沒有測試過）。 JS解決方案還允許您輕鬆更改使用.slideToggle或.show(500)的動畫或使用$(element).animate({'opacity': 1, 'height' : 100%'}, slow);的其他更多動畫，反之亦然。

因此，使用相同的標記一個JS的解決方案會是這樣的this fiddle。

jQuery的參考文獻：

來源

2013-08-27 04:59:43 cjross

懸停至純色背景？

回答

相關問題