我的href的顏色在活動時不會改變

-2

.calculate:active { 
 
    background-color: red; 
 
    } 
 
    .calculate:hover { 
 
    background-color: green; 
 
    }

<li class="calculate"> 
 
    <a href="calculate.html" style="font-size:18px">Calculator</a> 
 
</li>

當我擁計算器鏈接，點擊按鈕，然後它會改變顏色爲紅色，當我鬆開點擊它回來綠色，然後頁面加載到指定calculate.html 。當頁面加載時，計算href的顏色變爲紅色。現在這裏的問題是，當我將點擊按鈕保持在href時，它會變成紅色，當我真正點擊它時，它會變回綠色，等待頁面加載並變回紅色。我希望它不會回到綠色，並且只有在被點擊時纔會變成紅色。

來源

2014-10-19 Abhinav Pandey

當你想樣式錨-.- – 2014-10-19 17:19:25

您正在定義爲懸停李您需要的款式錨，不是。你需要風格的錨點。 – Gogol 2014-10-19 17:26:50

[** Fiddle **]（http://jsfiddle.net/6wyb6d0j/） – akinuri 2014-10-19 17:36:36

:hover應該在:active之前定義，而不是之後。另外，在鏈接上使用這些僞類，而不是在列表項上。

.calculate a:hover{ 
    background-color:green; 
} 
.calculate a:active{ 
    background-color:red; 
}

如果你想擁有你點擊它，它的紅色後，再使用:visited。 :active只會在您點擊它時變成紅色。 :visited僞類必須在類:hover之前添加。

[編輯]

您的意見後，我明白你的意思。你說過，在鏈接頁面加載之前，你點擊後立即從紅色轉換爲綠色。除非您使:hover和:active的風格相等，否則您將始終看到此轉換。

來源

2014-10-19 17:12:11 ProgramFOX

不工作！ – 2014-10-19 17:15:33

@AbhinavPandey我更新了我的答案，現在試試。 – ProgramFOX 2014-10-19 17:18:09

鏈接上沒有僞類 – 2014-10-19 17:23:39

如果我理解正確，您希望鏈接在點擊後保持紅色。對於這一點，你可以添加一個CSS類如下圖所示：

var link = document.querySelector(".calculate"); 
 
link.onclick = function(){ 
 
    this.classList.add("clicked"); 
 
}

.calculate:active { 
 
    background-color: red; 
 
} 
 
.calculate:hover { 
 
    background-color: green; 
 
} 
 
.calculate.clicked { 
 
    background-color: red; 
 
}

<li class="calculate"> 
 
    <a href="#" >Calculator</a> 
 
</li>

來源

2014-10-19 18:14:27

我的href的顏色在活動時不會改變

回答

相關問題