如何从CSS中移除悬停效果?

时间:2022-03-22 22:37:49

I'm currently having a text as hyperlink and on this some CSS code is getting applied. Due to which on hover the text got underline and font gets bold on hover event. But now what I want to do is remove the hyperlink and apply the same effect bydefault i.e. not on hover. In short I want to apply the style currently applying on hover without hovering the text. My HTML and css code is as follows:

我现在有一个文本作为超链接,在这个CSS代码上正在应用。由于鼠标悬停,文本在悬停事件中得到下划线和字体。但是现在我要做的是移除超链接,并在默认情况下应用相同的效果,也就是说不要在鼠标悬停上。简而言之,我想要应用目前应用于悬停的样式,而不需要在文本上悬停。我的HTML和css代码如下:

.faq .section p.quetn a:hover {
    text-decoration:underline;
    font-weight:bold
}
<p class="quetn"><a href="">5.14 Where do i see my test results?</a></p>

One more important thig is I can't change the above written CSS, I want to override the above CSS code by writing a new class. Can you help me in achieving this? Thanks in advance.

更重要的一点是我不能改变上面写的CSS,我想写一个新类来覆盖上面的CSS代码。你能帮我实现这个目标吗?提前谢谢。

5 个解决方案

#1


13  

Just use the same rule for when the link is not being hovered:

只要使用相同的规则,当链接不存在时:

.faq .section p.quetn a, .faq .section p.quetn a:hover {
    text-decoration:underline;
    font-weight:bold
}

EDIT

编辑

Juse seen that you can't change the CSS for some reason.

Juse看到,由于某些原因,您无法更改CSS。

Just create a new class with the same styles.

只需创建具有相同样式的新类。

a.class, a.class:hover {
    text-decoration:underline;
    font-weight:bold
}

<a class="class" title="" href="#">Some Link</a>

EDIT v2

编辑v2

Do you want to style the text but remove the link markup?

您想要对文本进行样式化,但删除链接标记吗?

It would just be

这就是

<p class="class">Text</p>

p.class {
    text-decoration:underline;
    font-weight:bold
}

#2


0  

Like this

像这样

demo

演示

css

css

.quetn a:hover {
    text-decoration:underline;
    font-weight:bold;
}

#3


0  

Then instead using

然后,而不是使用

.faq .section p.quetn a:hover

use

使用

.faq .section p.quetn a

If you are targeting only P tag instead of anchor tag, then use it as below :

如果你的目标是P标签而不是锚标签,那么使用它如下:

.faq .section p.quetn

#4


0  

html

html

<p class="quetn newClass"><a href="">5.14 Where do i see my test results?</a></p>    

css

css

.quetn a:hover {
        text-decoration:underline;
        font-weight:bold;
        cursor:default;
}

.newclass a:hover{
        text-decoration:none; !important
        font-weight:bold; !important
        cursor:default; !important
}

Use !important for priority.

使用!重要的优先级。

#5


0  

Code below for Hover Enable

下面的代码支持悬停

a:hover {
  background-color: yellow;
}

Code below for Hover Disable

下面的代码禁止悬停

a:nohover {
  background-color: yellow;
}

#1


13  

Just use the same rule for when the link is not being hovered:

只要使用相同的规则,当链接不存在时:

.faq .section p.quetn a, .faq .section p.quetn a:hover {
    text-decoration:underline;
    font-weight:bold
}

EDIT

编辑

Juse seen that you can't change the CSS for some reason.

Juse看到,由于某些原因,您无法更改CSS。

Just create a new class with the same styles.

只需创建具有相同样式的新类。

a.class, a.class:hover {
    text-decoration:underline;
    font-weight:bold
}

<a class="class" title="" href="#">Some Link</a>

EDIT v2

编辑v2

Do you want to style the text but remove the link markup?

您想要对文本进行样式化,但删除链接标记吗?

It would just be

这就是

<p class="class">Text</p>

p.class {
    text-decoration:underline;
    font-weight:bold
}

#2


0  

Like this

像这样

demo

演示

css

css

.quetn a:hover {
    text-decoration:underline;
    font-weight:bold;
}

#3


0  

Then instead using

然后,而不是使用

.faq .section p.quetn a:hover

use

使用

.faq .section p.quetn a

If you are targeting only P tag instead of anchor tag, then use it as below :

如果你的目标是P标签而不是锚标签,那么使用它如下:

.faq .section p.quetn

#4


0  

html

html

<p class="quetn newClass"><a href="">5.14 Where do i see my test results?</a></p>    

css

css

.quetn a:hover {
        text-decoration:underline;
        font-weight:bold;
        cursor:default;
}

.newclass a:hover{
        text-decoration:none; !important
        font-weight:bold; !important
        cursor:default; !important
}

Use !important for priority.

使用!重要的优先级。

#5


0  

Code below for Hover Enable

下面的代码支持悬停

a:hover {
  background-color: yellow;
}

Code below for Hover Disable

下面的代码禁止悬停

a:nohover {
  background-color: yellow;
}