悬停/活动时更改按钮

Question

嗨，我有这个按钮让我发疯了！

以下是jfiddle

HTML：

values: {
0: { 0: 999999, 1: 999999, …, 59: 1000000 },
1: { 0: 2000000, 1: 2000000, …, 59: 1000000 },
…,
58: { 0: 1600000, 1: 1200000, …, 59: 1100000 },
59: { 0: 1300000, 1: 1400000, …, 59: 1500000 }
}

CSS：

<div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</div>

正如您所看到的，当单击按钮或当前显示子链接时，它是绿色的！我试图让它透明，所以只有文字显示。

我认为它是：悬停或：活跃但似乎从来没有工作过，所以我不知道是什么导致它变绿或我如何解决这个问题。有什么帮助吗？

Answer 1

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover {
    background-color: #3e8e41;
}

应该是

.dropdown:hover {
    background-color: transparent;
}

Answer 2

要使其成为可靠 - 使用几个伪类

.dropdown:hover,
.dropdown:focus,
.dropdown:active {
    background-color: transparent;
}