search

RoelN / multicolor-icons-demo

multicolor-icons-demo
17 stars 3 forks source link

Hover #1

Open marsele190 opened 8 years ago

marsele190 commented 8 years ago

How to add a hover effect correctly. I tried

[data-icon="o"]:hover {
  color: #ccc;
}

but it changes only first color. I also tried:

[data-icon="o"]:first-line:hover {
  color: #ccc;
}

but it changes nothing... So how to use hover here? Thx.

RoelN commented 8 years ago

You'll have to set the hover color for every pseudo element, like so:

[data-icon="o"]:hover {
  color: #7a6155;
}
[data-icon="o"]:hover:first-line {
  color: #3c2313;
}
[data-icon="o"]:hover:first-letter {
  color: #593a2a;
}
[data-icon="o"]:hover:after {
  color: #fcb040;
}