javascript - 更改文本颜色以匹配动态背景颜色

Question

我正在尝试更改悬停时链接的颜色以匹配始终在变化的背景。这是我目前拥有的 JSFiddle:https://jsfiddle.net/Lcz7gk72/

基本上，我希望“test@test.com”在悬停时与主体背景颜色相匹配。

将不胜感激任何帮助。除非真的需要，否则我宁愿不使用 jQuery，而只使用 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

我建议创建一个新动画来激活 color <a> 悬停时显示的文本属性元素，并添加 - 或更改 - a::after (或者，实际上是 a:after )规则。

更改包含在下面的 CSS 中并进行了解释:

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>

外部 JS Fiddle demo用于实验和开发。

不幸的是，上述解决方案确实需要您确保 data-text属性存在，并用适当的文本填充；考虑到这一点——尽管你不喜欢依赖 JavaScript——我想发布另一个片段，它使用 JavaScript 函数来适本地填充集，并填充 data-text。相关元素的属性:

// 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>

外部 JS Fiddle demo用于实验和开发。