wake-up-neo.net

CSS-Bildrand leuchtet, wenn Sie mit individueller Farbe schweben

Ich möchte fragen, wie ich auf einen Bildrand ein anderes Farbglühen anwenden sollte, wenn der Benutzer den Mauszeiger darüber bewegt. Ich sage gerne, dass ich in dieser JSFiddle -Datei einen grünen Daumen und einen roten Daumen habe. Ich möchte, dass jeder Bildrand entsprechend der Farbe des Bildes oder der von mir angegebenen Farbe leuchten soll. Wie soll ich das erreichen? 

PS ** Zum Beispiel werden die Bilder in JSFiddle in base64 konvertiert.

So mache ich es in meinem 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);
}

Danke dir

htmlcsscss3hover
11
Kenny Yap

Wenn ich Ihre Frage verstehe, dann hier ein Beispiel 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);
}
18
Alex Wilson

Wie im Kommentar beschrieben, gibt es für HTML/CSS keine Möglichkeit, die Hauptfarbe des angezeigten Bildes zu bestimmen. Wenn Sie die vorherrschende Farbe jedes Bildes kennen, geben Sie ihnen die Klassennamen an und schreiben Sie das zugehörige CSS.

Eine einfache Version finden Sie unter - 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);
}
4
Paul

Veränderung:

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

zu:

 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>? ] ]#
0
Gildas.Tambo

Box Schatten arbeitete auch für,

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

Wenn Sie mehr Stil in CSS haben wollen

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

oder verwenden Sie Ihr benutzerdefiniertes Bild so

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