我创建了一组不同大小、颜色和效果的按钮,所以有绿色按钮、红色按钮等 其中之一是下面的蓝色按钮。如您所见,鼠标悬停时背景颜色会变暗
我只想创建一个 CSS 类,.button-disabled
,它会使按钮看起来像一个禁用的按钮。我正在尝试找出一种方法来在禁用按钮时消除悬停效果(如下例中的第二个按钮)
请注意,我希望此类应用于具有不同背景颜色的按钮,因此我不能只添加如下内容:
.button-disabled:hover{
background-color: /** Same as when not hovering **/
}
.button{
text-decoration: none;
border: none;
padding: 12px 20px;
cursor: pointer;
outline: 0;
display: inline-block;
margin-right: 2px;
color: #ffffff;
border-radius: 12px;
}
.button-blue{
background-color: #3498db;
}
.button-blue:hover{
background-color: #2980b9;
}
.button-blue:active{
color: #3498db;
background-color: #ffffff;
box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.2);
}
.button-disabled{
opacity: 0.6;
}
<button class="button button-blue">Enabled Button</button>
<button class="button button-blue button-disabled" disabled>Disabled Button</button>
最佳答案
您可以使用 pointer-events: none
来确保它不执行任何操作。这是阻止任何 hover
效果甚至点击元素的正确方法:
.button {
text-decoration: none;
border: none;
padding: 12px 20px;
cursor: pointer;
outline: 0;
display: inline-block;
margin-right: 2px;
color: #ffffff;
border-radius: 12px;
}
.button-blue {
background-color: #3498db;
}
.button-blue:hover {
background-color: #2980b9;
}
.button-blue:active {
color: #3498db;
background-color: #ffffff;
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
}
.button-disabled {
opacity: 0.6;
pointer-events: none;
}
<button class="button button-blue">Enabled Button</button>
<button class="button button-blue button-disabled" disabled>Disabled Button</button>
因为这只适用于新版本的浏览器,最好使用相同的颜色,同时添加 :hover
状态:
.button {
text-decoration: none;
border: none;
padding: 12px 20px;
cursor: pointer;
outline: 0;
display: inline-block;
margin-right: 2px;
color: #ffffff;
border-radius: 12px;
}
.button-blue {
background-color: #3498db;
}
.button-blue:hover {
background-color: #2980b9;
}
.button-blue:active {
color: #3498db;
background-color: #ffffff;
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
}
.button-blue.button-disabled:hover,
.button-disabled {
opacity: 0.6;
background-color: #3498db;
}
<button class="button button-blue">Enabled Button</button>
<button class="button button-blue button-disabled" disabled>Disabled Button</button>
当您定义了多个类并且必须为每种颜色重新定义 disabled
类时,这将变得很痛苦。
关于html - 禁用按钮时禁用悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37050240/