html鼠标悬停禁止,html – 禁用按钮时禁用悬停效果

您可以使用pointer-events：none来确保它不执行任何操作.这是阻止任何悬停效果甚至点击元素上发生的正确方法：

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

}

Enabled Button

Disabled Button

由于这仅适用于新版本的浏览器,因此最好使用相同的颜色,同时添加：悬停状态：

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

}

Enabled Button

Disabled Button

当您定义了多个类时,这将变得很痛苦,并且您必须为每种颜色重新定义禁用的类.