Html CSS-Image 边框在使用单独颜色悬停时发光
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25685794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS-Image border glow when hover with individual color
提问by Kenny Yap
I would like to ask how should I apply different colour glow to an image border when a user hover over? like say that in this JSFiddlefile, I have a green thumb and a red thumb. I want each image border to glow according to the colour of the image, or any colour that I specify. How should I achieve that?
我想问一下，当用户悬停在图像边框上时，我应该如何将不同颜色的光晕应用到图像边框上？就像说在这个JSFiddle文件中，我有一个绿色拇指和一个红色拇指。我希望每个图像边框根据图像的颜色或我指定的任何颜色发光。我应该如何做到这一点？
PS** For example purposes the image are converted to base64 in the JSFiddle.
PS** 例如，图像在 JSFiddle 中被转换为 base64。
This is how I do in my CSS
这就是我在 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);
}
Thank You
谢谢你
回答by Alex Wilson
If I understand your question then here is an example 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);
}
回答by Paul
As written in the comment, there is no way for HTML/CSS to determine the main color of the image displayed. If you know the predominant color of each image, give them class names accordingly and write the related CSS.
正如评论中所写，HTML/CSS 无法确定显示图像的主要颜色。如果您知道每个图像的主要颜色，请给它们相应的类名并编写相关的 CSS。
See demofor a simple version.
有关简单版本，请参阅演示。
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);
}
回答by Gildas.Tambo
Change:
改变：
box-shadow: inset 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
to:
到：
box-shadow: inset 0 0 5px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
回答by Punitha Subramani Yoganyaa S
Box shadow also worked for,
Box shadow也适用，
img:hover{ box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
If you want to more style in css
如果你想在 css 中添加更多样式
http://ianlunn.github.io/Hover/
http://ianlunn.github.io/Hover/
or use your custom image like this
或像这样使用您的自定义图像
img:hover{background:url('http://www.addglitter.com/link-sparkle.gif');
