Question

<a>Link</a>

Can we prevent this element from having any hover effect without usin :hover?

I usually go:

a {
color= white;
}

a:hover {
color= white;
}

I've checked pointer-event= none; but it disabled the entire element and made it text.

Answer 1

您的CSS中存在语法错误，请使用以下代码更新您的CSS：

a, a:hover {
    color: white;
}

＆＃13;

 a {
    color: white !important;
 }

/*
  So you can actually see the white link 
*/
div {
  width: 50px;
  height: 50px;
  background-color: black;
}

＆＃13;

<div>
  <a href="#">link</a>
</div>

＆＃13;

或者如果您不想使用:hover，只需在默认CSS中添加!important

a {
    color: white !important;
}

注意：对于标准练习，我们不经常使用!important。所以你可以在线添加这个css。您可以查看以下更新的代码..

＆＃13;

 

div {
  width: 50px;
  height: 50px;
  background-color: black;
}

＆＃13;

<div>
  <a href="#" style="color: white;">link</a>
</div>

＆＃13;

Answer 2

首先。不要在CSS中使用=，而是使用:。

要禁用悬停（动画），请执行以下操作：

a, a:hover {
  color: white;
  text-decoration: none;
}

a:hover {
  cursor: text;
}

但是，如果您指定了href属性，则该链接仍然可以点击。您无法通过css停用此功能，但您需要javascript或jquery。

实施例

<a href="/" onclick="return false;">test</a>

CSS禁用<a> hover

2 个答案: