按鈕背景顏色不起作用

我想使用我創建的這些波紋按鈕，但是當我做一個<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>

來源

2015-11-20 user5544792

你可以澄清你在問什麼嗎？我不確定。謝謝 –

不要在'a'裏面使用'button' http://www.w3.org/TR/html-markup/button.button.html#button.button-constraints –

它不工作的原因是button:nth-child(2)將一個按鈕元素是其母公司的第二個孩子相匹配。

在你的情況下，你的按鈕是而不是它的父母的第二個孩子，因爲它的父母是<a>。

這樣做：

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

看看它是如何工作的呢？

欲瞭解更多關於nth-child的信息，請登錄nth-child MDN page。

來源

2015-11-20 02:01:56

按鈕背景顏色不起作用

回答

相關問題