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。

有关简单版本，请参阅 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);
}

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

Answer 4

Box shadow也适用于，

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

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

4 个答案: