更改懸停/活動按鈕

Question

嗨，我有這個讓我瘋狂的按鈕！

這裏是jfiddle

HTML：

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

CSS：

/* Dropdown Button */ 
.dropbtn { 
    background-color: Transparent; 
    background-repeat:no-repeat; 
    border: none; 

    cursor:pointer; 
    overflow: hidden; 
    outline:none; 
    text-shadow:none !important; 
    box-shadow:none !important; 



} 

/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
    position: relative; 
    display: inline-block; 
} 

/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #f1f1f1} 

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content { 
    display: block; 
} 

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

.dropbtn:hover 
{ 
    text-color: black; 
} 

正如你可以看到單擊該按鈕或當前顯示的子鏈接它是綠色時！我試圖讓它透明，所以只有文字顯示。

我認爲這是一個：懸停或：活動，但從來沒有工作，所以我不知道是什麼原因導致它變成綠色或我如何解決這個問題。任何幫助？

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