javascript - 按钮背景颜色不起作用

Question

我想使用我创建的这些波纹按钮，但是当我执行 <a href> 时标记按钮的背景颜色发生变化。我碰巧相信它在 CSS 中，但我不能确定。我关闭了文本装饰，因此下划线不会显示，但仅此而已。

var addRippleEffect = function(e) {
  var target = e.target;
  if (target.tagName.toLowerCase() !== 'button') return false;
  var rect = target.getBoundingClientRect();
  var ripple = target.querySelector('.ripple');
  if (!ripple) {
    ripple = document.createElement('span');
    ripple.className = 'ripple';
    ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
    target.appendChild(ripple);
  }
  ripple.classList.remove('show');
  var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;
  var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;
  ripple.style.top = top + 'px';
  ripple.style.left = left + 'px';
  ripple.classList.add('show');
  return false;
}

document.addEventListener('click', addRippleEffect, false);

body {
  margin: 0;
  padding: 0;
}
#wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
h1 {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  flex: 2;
  font-family: 'Open Sans';
}
#main {
  flex: 5;
}
button {
  position: relative;
  display: block;
  width: 13em;
  height: 3em;
  margin: 2em;
  border: none;
  outline: none;
  letter-spacing: .2em;
  font-weight: bold;
  background: #dfdfdf;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  border-radius: 2px;
  font-family: 'Open Sans';
}
button:nth-child(2) {
  color: #fff;
  background: #4285f4;
  transition: all 0.3s ease-in-out;
}
button:nth-child(2):hover {
  background: #6ea2f7;
}
button:nth-child(3) {
  color: #fff;
  background: #00bad2;
}
button:nth-child(4) {
  color: #fff;
  background: #ff8a80;
}
.ripple {
  position: absolute;
  background: rgba(0, 0, 0, .15);
  border-radius: 100%;
  transform: scale(0);
  pointer-events: none;
}
.ripple.show {
  animation: ripple .75s ease-out;
}
@keyframes ripple {
  to {
    transform: scale(2);
    opacity: 0;
  }
}
a {
  text-decoration: none;
}

<link href='https://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
<div id="wrap">
  <h1>Ripple Effect</h1>
  <div id="main">
    <button>BUTTON</button>
    <a href="http://www.google.com">
      <button>BUTTON</button>
    </a>
    <button>BUTTON</button>
    <button>BUTTON</button>
  </div>
</div>

Answer 1

它不起作用的原因是 button:nth-child(2)将匹配作为其父元素的第二个子元素的按钮元素。

就您而言，您的按钮不是其父级的第二个子级，因为其父级是 <a> .

这样做:

<button>
  <a href="http://google.com">BUTTON</a>
</button>

看看现在效果如何？

有关nth-child的更多信息访问nth-child MDN page .