Question

我已经设置了链接的样式（活动，链接等），但是我想做一个完全不同的样式的按钮，所以我尝试了以下方法：

.r-button { padding: 4px 52px; display: inline-block; text-align: center; font-size: 16px; text-decoration: none !important; color: black !important; border-radius: 12px; border:1px inset #282c37;}

.r-button:hover { cursor: selector; color:ivory;}

<a class="r-button" onclick="document.getElementById('menu').style.display='block'">  Click button </a>

但是后来我意识到：hover不适用于句号。这是为什么？我还必须做些其他的机会吗？

Answer 1

您将需要从dataList.Add(dataItem);中的颜色中删除！important或将其添加到.r-button的颜色中

.r-button:hover

.r-button { padding: 4px 52px; display: inline-block; text-align: center; font-size: 16px; text-decoration: none !important; color: black !important; border-radius: 12px; border:1px inset #282c37;}

.r-button:hover { cursor: selector; color:ivory !important;}

Answer 2

确实如此，您的color: black !important;覆盖了悬停，并且selector不是有效的游标。尝试将鼠标悬停。

.r-button:hover { cursor: pointer; }

Answer 3

您的:hover伪元素已被!important覆盖。避免在默认类中使用!important规则。

奖金提示！删除cursor: pointer中的锚标记，只需添加一个空的href="#"属性即可获得更好的可访问性。

.r-button {
  padding: 4px 52px;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  text-decoration: none;
  color: black;
  border-radius: 12px;
  border: 1px inset #282c37;
}
.r-button:hover {
  background-color: #282c37;
  color: ivory;
}

<a class="r-button" href="#" onclick="document.getElementById('menu').style.display='block'">Click button</a>

为什么悬停选择器不适用于小节？

3 个答案: