将鼠标悬停在可编辑文本字段白色间距样式问题上

Question

表格中有一个可编辑的文本字段列。当我将鼠标悬停在鼠标上时，它会添加white-space: nowrap;，从而使设计在用户界面中变得不太用户友好。因此，我需要删除此CSS。

是否有任何JavaScript代码或任何可停止生成以下CSS white-space样式的东西？

.mk-editable-field-container .editable-click {
  white-space: nowrap;
}

Answer 1

两种状态的CSS实现，因为您可能正在使用交互式CSS框架...

.mk-editable-field-container .editable-click,
.mk-editable-field-container .editable-click:hover {
  white-space: nowrap !important;
}

JavaScript实现

document.querySelector(".editable-click").addEventListener("mouseover", function(){
   // Check to see if "this" works
   // console.log(this == document.querySelector(".editable-click"));
   // this.style.whiteSpace = "nowrap"
   document.querySelector(".editable-click").style.whiteSpace = "nowrap";
});

希望这会有所帮助。

Answer 2

尝试使用全局值之一来覆盖此规则；初始，未设置，继承。

.mk-editable-field-container .editable-click {
  white-space: initial !important;
}