覆蓋a：懸停樣式與普通樣式相同嗎？

a - background-color：red;
a：hover - background-color：green;

現在我創建一個新的全球一流的「已禁用」，以適用於這裏和其他鏈接（與其他背景顏色），這是否：

a.disabled - 不透明度：0.7; （所以在最初的例子中，它顯示背景紅色，不透明度爲0.7）
a.disabled：懸停 - 與a.disabled相同; （初始例如應該顯示背景紅色不透明度0.7）

基本上禁用類還禁用改變背景顏色的「懸停」效應。

我很難找出解決方案，作爲一個全球課程（顯然，如果我設置a.disabled：懸停背景顏色：紅色它的作品）。

a { 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: red; 
 
    border: 1px solid gray; 
 
} 
 

 
a:hover { 
 
    background-color: green; 
 
} 
 

 
.disabled { 
 
    opacity: 0.7; 
 
} 
 

 
.disabled:hover { 
 
    opacity: 0.7; 
 
    background-color: initial; 
 
}

<a href="#">click me</a> 
 
<a href="#" class="disabled">disabled me</a>

主要問題是在這裏：

.disabled:hover { 
    opacity: 0.7; 
    background-color: initial; 
}

正如我不能想出一個值穿上背景顏色，基本上只是「空」的背景 - 顏色：綠色指示。

再次說明：我知道將它設置爲「紅色」的作品。但我有其他與藍色和黃色背景顏色的鏈接，在這種情況下，它不會工作。

是否有任何聰明的，全球性的方式來實現這一點，或者我只需要爲我的'藍色，紅色和黃色'鏈接創建不同的.disabled類？

來源

2016-11-18 AlfaTeK

有一種方法可以這樣：

a.disabled{ 
    pointer-events:none; 
}

其實這並不僅僅是維護其背景多，它禁止click事件太

編輯：

只是爲了防止將滑鼠a:hover應該改變這樣的：

a:not(.disabled):hover

，並清除.disabled:hover

（OR）

看來你，如果你想要的CSS是共同改變結構：沒有其他辦法，我能想到的：

.linkBlue:hover{ 
 
    background-color:blue; 
 
    } 
 

 
.linkRed:hover{ 
 
    background-color:red; 
 
    } 
 

 
.linkYellow:hover{ 
 
    background-color:yellow; 
 
    } 
 

 
.linkGreen:hover{ 
 
    background-color:green; 
 
    } 
 

 
.disabled{ 
 
    cursor:not-allowed; 
 
    } 
 

 
.disabled a 
 
{ 
 
    pointer-events:none; 
 
}

<a class="linkBlue">Link1</a> 
 
<span class='disabled'><a class="linkRed">Link1</a></span> 
 
<a class="linkYellow">Link1</a> 
 
<span class='disabled'><a class="linkGreen">Link1</a></span>

來源

2016-11-18 05:19:43

這是非常聰明！從來沒有想過使用它。我會等待更多的答案，因爲這有問題一起禁用指針事件，這意味着如果你嘗試像光標：不允許在.disabled類它不會工作。 – AlfaTeK

這是否解決了它？ –

使用a：not（.disabled）：hover需要我做我想要避免的事情：a：not（.disabled）：hover，a - myBlueLink：not（.disabled）：hover和a-- myYellowLink：沒有（.disabled）：懸停。它的作品，但給我同樣的麻煩，只是爲我的藍色，紅色和黃色鏈接創建3個不同的禁用類。從我的編輯中可以看出，沒有任何方法可以「廢除」背景顏色：綠色指令，我們必須在其周圍工作？ – AlfaTeK

根據CSS規範初始值爲：

每個屬性都有一個初始值，在屬性的定義表中定義。如果該屬性不是繼承屬性，並且該級聯不會導致一個值，那麼該屬性的指定值爲其初始值。

爲背景顏色屬性的初始值爲是透明的。這就是爲什麼

.disabled:hover { 
    background-color: initial; 
}

不同於您的預期輸出。

但你可以用其他方式做到這一點。你可以試試這個CSS。希望它會有所幫助。

a:not(.disabled):hover { 
    background-color: green; 
} 

.disabled:hover { 
    opacity: 0.7; 
}

來源

2016-11-18 06:27:11

覆蓋a：懸停樣式與普通樣式相同嗎？

回答

相關問題