使用单独颜色悬停时,CSS-Image边框会发光

Question

我想问一下,当用户将鼠标悬停在图像边框上时,应该如何对图像边框应用不同颜色的光晕？比如说在这个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);
}

谢谢

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

Answer 2

正如评论中所写，HTML/CSS 无法确定显示图像的主要颜色。如果您知道每个图像的主要颜色，请给它们相应的类名并编写相关的 CSS。

有关简单版本，请参阅演示。

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