1

Looking for a way to set a new color for every new hover over text/link with CSS3 only. At the moment hover can have only last value.

.hover-text
    a:hover   {color:red;}
    a:hover   {color:white;}
    a:hover   {color:blue;}
    a:hover   {color:puple;}

Every new hover has to have different colour. Is that possible with CSS3 only?

2
  • 1
    No, you would have to use Javascript etc. You can't dynamically change the color for each iteration with only CSS.
    – Harry
    Aug 14, 2014 at 6:21
  • this is not possible with the javascript but you can make use of javascript for this kind of requirement Aug 14, 2014 at 6:21

1 Answer 1

1

Yo can set css3 nth-child psuedo selector for multiple elements.

for single link multiple colors you have to use javaScript or sass

It might help

CSS Hover Effect

 .hover-text > a:nth-child(1):hover {
        background:red;
    }
    
    .hover-text > a:nth-child(2):hover {
        background:white;
    }
    
    .hover-text > a:nth-child(3):hover {
        background:blue;
    }
    
    .hover-text > a:nth-child(4):hover {
        background:purple;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.