如何在Wella.com上的div元素上製作懸停漸變？

我需要在div元素上製作漸變懸停效果（例如：http://www.wella.com/professional/en-UK/home）如何在Wella.com上的div元素上製作懸停漸變？

我該怎麼做？使用jQuery或css更好嗎？我試圖使用Chrome開發人員工具來查明，但徒勞無功。請，有人可以幫我嗎？

感謝

2016-10-03 dinodino11

編輯：作爲評論你想與頂部的漸變效果的BG-圖像。因此，使用：懸停實際上你可以針對不同的類，所以它會是這樣的：

更新CSS：

.hoverable { 
    width: 80%; 
    height: 50vh; 
    background-image: url('http://media.wella.com/professional/m/_master/homepage/Home%20Gallery%20Item/for-all-latest-news_d.jpg'); 
    background-size: contain; 
} 

.hoverable:hover .content { 
    background: linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%); 
}

CSS可能是你最好的選擇，你可以在你的css上捕獲：hover事件，以便在你想要的div上應用所需的漸變。

檢查this Fiddle更多的信息，但它是這樣的：

.hoverable { 
 
    width: 80%; 
 
    height: 50vh; 
 
} 
 
.hoverable:hover { 
 
    background: -webkit-linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%); 
 
    background: -moz-linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%); 
 
    background: -o-linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%); 
 
    background: linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%); 
 
} 
 
.content { 
 
    width: 100%; 
 
    height: 100%; 
 
    color: black; 
 
}

<div class="hoverable"> 
 

 
    <div class="content"> 
 
    Really nice in here 
 
    </div> 
 
</div>

希望它能幫助！乾杯

來源

2016-10-03 21:50:22

謝謝，但如果我使用背景圖像裏面的內容類呢？在這種情況下，懸停效果不起作用。 – dinodino11

@ dinodino11噢！我明白了，我已經更新了答案以符合您的要求，但您只需使用'：hover'效果來定位內部div。讓我知道，如果我可以有任何幫助。 –

很多很多，謝謝！很棒！ – dinodino11

這是一個很好的問題。這是一個理論上的答案，然後是你的問題的具體答案。通常你想保持CSS的設計更改。保持Javascript（jQuery是一個JavaScript庫），重點在於功能。

現在爲了更具體地解決懸停效應，我不確定他們是如何在您引用的網站上做到的，但是如果您只是爲div切換漸變疊加層，那麼我會建議使用：懸停CSS僞選擇器。這是簡單，乾淨，它會在所有這些瀏覽器的工作http://caniuse.com/#feat=css-sel2

你的CSS是這樣的

div:hover { 
    background: linear-gradient(...); //Add all vendor prefixes 
    transition 3s; //Add all vendor prefixes 
}

有一個偉大的一天！

來源

2016-10-03 22:05:07

謝謝你的回答，安德魯！ – dinodino11

如何在Wella.com上的div元素上製作懸停漸變？

回答

相關問題