Question

我试图在悬停时更改链接的颜色以匹配始终在变化的背景。这是迄今为止我所掌握的JSFiddle：https://jsfiddle.net/Lcz7gk72/

基本上，我想要＆＃34; test@test.com"在悬停时匹配身体背景颜色。

非常感谢任何帮助。除非它真的需要，否则我宁愿不使用jQuery并将其保留为Javascript。

＆＃13;

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; }
}

＆＃13;

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

＆＃13;

Answer 1

我建议创建一个新动画，以动画color元素悬停时显示的文字的<a>属性，并添加 - 或更改 - a::after（或确实是a:after）规则。

下面的CSS中包含并解释了这些更改：

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

外部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;
  });
})();

＆＃13;

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

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

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

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

1 个答案: