Change text color to match dynamic background color

Question

I'm trying to change the color of my links on hover to match the background which is always changing. Here's a JSFiddle of what I have so far: https://jsfiddle.net/Lcz7gk72/

Basically, I want the "test@test.com" to match the body background color on hover.

Would appreciate any help. Unless it's really needed, I'd rather not use jQuery and keep this to just Javascript.

 body { font: 20px monospace; color: #fff; -webkit-font-smoothing: antialiased; animation: pulse 60s infinite normal; -webkit-animation: pulse 60s infinite normal; -moz-animation: pulse 60s infinite normal; -o-animation: pulse 60s infinite normal; } a { color: #fff; border-bottom: 1px dotted #fff; text-decoration: none; } a:hover { border-bottom: 1px solid #fff; position: relative; } a:after { display: block; position: absolute; left: 0; bottom: 0px; width: 0; height: 20px; background-color: #fff; content: ""; transition: width 0.4s; } a:hover { color: #fff; } a:hover:after { width: 100%; } @keyframes pulse { 0% { background-color: #f00; } 25% { background-color: #0f0; } 50% { background-color: #00f; } 75% { background-color: #00a; } 100% { background-color: #0a0; } } @-webkit-keyframes pulse { 0% { background-color: #f00; } 25% { background-color: #0f0; } 50% { background-color: #00f; } 75% { background-color: #00a; } 100% { background-color: #0a0; } } @-moz-keyframes pulse { 0% { background-color: #f00; } 25% { background-color: #0f0; } 50% { background-color: #00f; } 75% { background-color: #00a; } 100% { background-color: #0a0; } } @-o-keyframes pulse { 0% { background-color: #f00; } 25% { background-color: #0f0; } 50% { background-color: #00f; } 75% { background-color: #00a; } 100% { background-color: #0a0; } } 

 <a href="mailto:test@test.com">test@test.com</a> 

Answer 1

I'd suggest creating a new animation to animate the color property of the text shown on hover of the <a> element, and adding – or changing – a::after (or, indeed, the a:after ) rules.

The changes are included, and explained, in the CSS below:

 body { font: 20px monospace; color: #fff; -webkit-font-smoothing: antialiased; animation: pulse 60s infinite normal; -webkit-animation: pulse 60s infinite normal; -moz-animation: pulse 60s infinite normal; -o-animation: pulse 60s infinite normal; } a { color: #fff; border-bottom: 1px dotted #fff; text-decoration: none; /* I added this rule to the base 'a' rule, to avoid the otherwise ghastly jump when un-hovering the <a>: */ position: relative; } a:hover { border-bottom: 1px solid #fff; } a:after { display: block; position: absolute; left: 0; bottom: 0; width: 0; height: 20px; background-color: #fff; /* slowed down significantly, to clearly show the transition of the text as it progresses across the element: */ transition: width 3s; /* Obtaining the text to show from the custom data-attribute: */ content: attr(data-text); /* To hide the pseudo-element's text in the non-hovered state: */ overflow: hidden; /* /linking to the animation: */ -webkit-animation: textPulse 60s infinite normal; -moz-animation: textPulse 60s infinite normal; -o-animation: textPulse 60s infinite normal; animation: textPulse 60s infinite normal; border-bottom: 1px solid transparent; } a:hover:after { width: 100%; } @keyframes pulse { 0% { background-color: #f00; } 25% { background-color: #0f0; } 50% { background-color: #00f; } 75% { background-color: #00a; } 100% { background-color: #0a0; } } @-webkit-keyframes pulse { 0% { background-color: #f00; } 25% { background-color: #0f0; } 50% { background-color: #00f; } 75% { background-color: #00a; } 100% { background-color: #0a0; } } @-moz-keyframes pulse { 0% { background-color: #f00; } 25% { background-color: #0f0; } 50% { background-color: #00f; } 75% { background-color: #00a; } 100% { background-color: #0a0; } } @-o-keyframes pulse { 0% { background-color: #f00; } 25% { background-color: #0f0; } 50% { background-color: #00f; } 75% { background-color: #00a; } 100% { background-color: #0a0; } } @keyframes textPulse { 0% { color: #f00; } 25% { color: #0f0; } 50% { color: #00f; } 75% { color: #00a; } 100% { color: #0a0; } } @-webkit-keyframes textPulse { 0% { color: #f00; } 25% { color: #0f0; } 50% { color: #00f; } 75% { color: #00a; } 100% { color: #0a0; } } @-moz-keyframes textPulse { 0% { color: #f00; } 25% { color: #0f0; } 50% { color: #00f; } 75% { color: #00a; } 100% { color: #0a0; } } @-o-keyframes textPulse { 0% { color: #f00; } 25% { color: #0f0; } 50% { color: #00f; } 75% { color: #00a; } 100% { color: #0a0; } } 

 <a href="mailto:test@test.com" data-text="test@test.com">test@test.com</a> 

External JS Fiddle demo for experimentation and development.

Unfortunately the above solution does require you to ensure that the data-text attribute exists, and is filled with the appropriate text; with that in mind – and despite your preference to not rely upon JavaScript – I'd like to post another snippet that employs a JavaScript function to appropriately fill set, and fill, the data-text attribute on the relevant elements:

// using the Immediately-Invoked Function Expression ('IIFE')
// syntax to invoke the wrapped anonymous function without
// having to call it elsewhere:
(function() {
  // getting all the elements, using document.querySelectorAll(),
  // with the (atrociously long, but explanatory) class-name of
  // 'showBodyBackgroundColoredTextOnHover' (by all means, please,
  // choose a shorter class-name):
  var elems = document.querySelectorAll('.showBodyBackgroundColoredTextOnHover');

  // Using Function.prototype.call() to apply an Array
  // method, Array.prototype.forEach(), on the
  // Array-like NodeList returnd by querySelectorAll():
  Array.prototype.forEach.call(elems, function(el) {
    // the first argument of forEach() is the array-element
    // of the Array over which we're currently iterating:

    // using the HTMLElement.dataset to create the
    // 'data-text' attribute/property value:
    el.dataset.text = el.textContent;
  });
})();

 (function() { var elems = document.querySelectorAll('.showBodyBackgroundColoredTextOnHover'); Array.prototype.forEach.call(elems, function(el) { el.dataset.text = el.textContent.trim(); }); })(); 

 body { font: 20px monospace; color: #fff; -webkit-font-smoothing: antialiased; animation: pulse 60s infinite normal; -webkit-animation: pulse 60s infinite normal; -moz-animation: pulse 60s infinite normal; -o-animation: pulse 60s infinite normal; } a { color: #fff; border-bottom: 1px dotted #fff; text-decoration: none; /* I added this rule to the base 'a' rule, to avoid the otherwise ghastly jump when un-hovering the <a>: */ position: relative; } a:hover { border-bottom: 1px solid #fff; } a:after { display: block; position: absolute; left: 0; bottom: 0; width: 0; height: 20px; background-color: #fff; /* slowed down significantly, to clearly show the transition of the text as it progresses across the element: */ transition: width 3s; /* Obtaining the text to show from the custom data-attribute: */ content: attr(data-text); /* To hide the pseudo-element's text in the non-hovered state: */ overflow: hidden; /* /linking to the animation: */ -webkit-animation: textPulse 60s infinite normal; -moz-animation: textPulse 60s infinite normal; -o-animation: textPulse 60s infinite normal; animation: textPulse 60s infinite normal; border-bottom: 1px solid transparent; } a:hover:after { width: 100%; } @keyframes pulse { 0% { background-color: #f00; } 25% { background-color: #0f0; } 50% { background-color: #00f; } 75% { background-color: #00a; } 100% { background-color: #0a0; } } @-webkit-keyframes pulse { 0% { background-color: #f00; } 25% { background-color: #0f0; } 50% { background-color: #00f; } 75% { background-color: #00a; } 100% { background-color: #0a0; } } @-moz-keyframes pulse { 0% { background-color: #f00; } 25% { background-color: #0f0; } 50% { background-color: #00f; } 75% { background-color: #00a; } 100% { background-color: #0a0; } } @-o-keyframes pulse { 0% { background-color: #f00; } 25% { background-color: #0f0; } 50% { background-color: #00f; } 75% { background-color: #00a; } 100% { background-color: #0a0; } } @keyframes textPulse { 0% { color: #f00; } 25% { color: #0f0; } 50% { color: #00f; } 75% { color: #00a; } 100% { color: #0a0; } } @-webkit-keyframes textPulse { 0% { color: #f00; } 25% { color: #0f0; } 50% { color: #00f; } 75% { color: #00a; } 100% { color: #0a0; } } @-moz-keyframes textPulse { 0% { color: #f00; } 25% { color: #0f0; } 50% { color: #00f; } 75% { color: #00a; } 100% { color: #0a0; } } @-o-keyframes textPulse { 0% { color: #f00; } 25% { color: #0f0; } 50% { color: #00f; } 75% { color: #00a; } 100% { color: #0a0; } } 

 <a href="mailto:test@test.com" class="showBodyBackgroundColoredTextOnHover">test@test.com</a> 

External JS Fiddle demo for experimentation and development.