覆盖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：悬停样式与普通样式相同吗？

回答

相关问题