CSS-Image边框发光时悬停单个颜色

Posted 2023-05-08

【中文标题】CSS-Image边框发光时悬停单个颜色

【英文标题】：CSS-Image border glow when hover with individual color

【发布时间】：2014-10-30 09:39:17

【问题描述】：

我想问当用户将鼠标悬停在图像边框上时，我应该如何将不同颜色的光晕应用到图像边框上？比如说在这个JSFiddle 文件中，我有一个绿色拇指和一个红色拇指。我希望每个图像边框根据图像的颜色或我指定的任何颜色发光。我应该如何做到这一点？

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);

谢谢

【问题讨论】：

我不明白！那是你要的吗 ？ jsfiddle.net/jcsjpcbb/4

html/CSS 无法确定显示图像的主要颜色。如果你知道每张图片的主要颜色，给它们相应的类名并编写相关的 CSS。

我认为@Paul 有我的答案...谢谢 Paul.... 我设法做到了...

【参考方案1】：

如果我理解你的问题，那么这里是一个例子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);

【讨论】：

@AlexWilson 很好的答案，但也支持带有“供应商扩​​展名或前缀”的 Opera 网络浏览器（也早在 2014 年）：-o- 例如：-o-box-shadow、-o-border-radius 更多信息可以找到here.. 我希望这条评论对想要支持更多浏览器的人有所帮助.. 注意：始终在代码中的默认值之前/末尾添加供应商扩展，例如：`box-shadow 应该在 Alex Wilson 的代码中完美编写的最后一个供应商扩展之后，干得好

【参考方案2】：

正如评论中所写，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);

【参考方案3】：

变化：

 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>? ] ]#

【参考方案4】：

盒子阴影也适用，

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

如果你想在 css 中添加更多样式

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

或像这样使用您的自定义图像

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