懸停時使用單獨顏色的CSS圖像邊框發光

我想問一下當用戶將鼠標懸停在圖像邊框上時，我應該如何應用不同的顏色發光？比如說在這個JSFiddle文件中，我有一個綠色的拇指和一個紅色的拇指。我希望每個圖像邊框根據圖像的顏色或我指定的任何顏色發光。我應該如何實現這一目標？懸停時使用單獨顏色的CSS圖像邊框發光

PS **例如，圖像在JSFiddle中轉換爲base64。

這是我在我的CSS怎麼辦

img{ 
    width: 16px; 
    cursor: pointer; 
    padding: 10px; 
} 

img:hover{ 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
    box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
}

謝謝

來源

2014-09-05 Kenny Yap

我不明白！那是你要的嗎？ http://jsfiddle.net/jcsjpcbb/4/ – Jack 2014-09-05 12:25:23

HTML/CSS無法確定顯示圖像的主要顏色。如果您知道每幅圖像的主色，請相應地給它們分類，並寫出相關的CSS。 – Paul 2014-09-05 12:27:54

嘗試一些香草JS – 2014-09-05 12:30:54

如果我明白你的問題那麼這裏有一個例子DEMO

img{ 
    width: 48px; 
    cursor: pointer; 
    /*padding: 10px;*/ 
    /* border:1px solid #fff;*/ 
    margin-right: 20px; 
} 

img:hover{ 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
box-shadow:   0px 0px 30px 0px rgba(0, 255, 0, 0.67); 
} 
img:last-of-type:hover{ 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
-webkit-box-shadow: 0px 0px 30px 0px rgba(232, 0, 0, 0.67); 
-moz-box-shadow: 0px 0px 30px 0px rgba(232, 0, 0, 0.67); 
box-shadow:   0px 0px 30px 0px rgba(232, 0, 0, 0.67); 
}

來源

2014-09-05 12:34:01

thx alex ...這正是我想要的... – 2014-09-06 04:38:34

歡迎您））） – 2014-09-08 08:41:41

@AlexWilson很好的答案，但也支持使用「供應商擴展名或前綴」的Opera Webbrowser（也在2014年）：'-o-'例如：'-o-box-shadow'，'-o- border-radius'更多的信息可以在這裏找到（http://www.opera.com/docs/specs/presto28/css/o-vendor/）。我希望這個評論對想要支持的人有幫助更多的瀏覽器。注意：總是在代碼的末尾添加Vendor擴展，例如：'box-shadow應該位於最後的供應商擴展之後，完全用Alex Wilson的代碼編寫，好的工作 – jagb 2017-04-17 20:16:59

變化：

box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);

到：

box-shadow: inset 0 0 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);

DEMO

box-shadow Syntax:

Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

來源

2014-09-05 12:32:12

寫在註釋，也沒有辦法爲HTML/CSS來確定顯示的圖像的主色。如果您知道每幅圖像的主色，請相應地給它們分類，並寫出相關的CSS。

請參閱demo爲一個簡單的版本。

img.green:hover{ 
    border-color: #66afe9; 
    box-shadow: 0 0 8px rgba(0,255,0, 0.6); 
} 
img.red:hover{ 
    border-color: #66afe9; 
    box-shadow: 0 0 8px rgba(255,0,0, 0.6); 
}

來源

2014-09-05 12:33:45 Paul

箱陰影也工作了，

img:hover{ box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }

如果你想更多的風格在CSS

http://ianlunn.github.io/Hover/

或使用您的自定義圖像這樣的

img:hover{background:url('http://www.addglitter.com/link-sparkle.gif');

來源

2014-09-05 12:46:07

懸停時使用單獨顏色的CSS圖像邊框發光

回答

相關問題