时间戳

首页 > 解决方案 > 单击后如何禁用悬停效果？

html - 单击后如何禁用悬停效果？

问题描述

我想要一个 CSS 代码，看起来像这样

div:hover {
 some hover effect
}

div:onclick{
 some on click event
 disable hover
}

这样做的目的是在我只关注一个元素后禁用所有元素的悬停。

标签： htmlcss

解决方案

您可以使用:active伪类。

button {
  cursor:pointer;
  outline:none;
  border:none;
}

button:hover {
  background:#ff9900;
}

button:active {
  background:red;
}
<button>Submit</button>

如果您希望在按下按钮后保持样式，请使用:focus

button {
  cursor:pointer;
  outline:none;
  border:none;
}

button:hover {
  background:#ff9900;
}

button:focus {
  background:red;
}
<button>Submit</button>

推荐阅读