CODEWITHSUNDEEP
htmlcssclass
PHPLover
PHPLover

Reputation: 12957

How to remove hover effect from CSS?

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:

.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.

Upvotes: 4

Views: 91988

Answers (5)

satish hiremath
satish hiremath

Reputation: 127

Code below for Hover Enable

a:hover {
  background-color: yellow;
}

Code below for Hover Disable

a:nohover {
  background-color: yellow;
}

Upvotes: 0

Google User
Google User

Reputation: 171

html

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

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.

Upvotes: 0

Ganesh Pandhere
Ganesh Pandhere

Reputation: 1652

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 : 

.faq .section p.quetn

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

demo

css

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

Upvotes: 0

martincarlin87
martincarlin87

Reputation: 11042

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.

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

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
}

Upvotes: 15

Related Questions