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。

按钮背景颜色不工作

1 个答案: