CODEWITHSUNDEEP
htmlcsswordpress
Scuzzin
Scuzzin

Reputation: 23

a:hover not working properly

I'm using wordpress to create a website (Using the 2017 theme). I added a link by adding the following HTML:

<a href="www." target="_blank"><span style="color: #0000ff;">text</span></a>

then I had to get rid of Wordpress underline, by adding this CSS:

.entry-content a, .entry-summary a, .taxonomy-description a, .logged-in-as a, .comment-content a, .pingback .comment-body > a, .textwidget a, .entry-footer a:hover, .site-info a:hover {
   box-shadow: 0px 0px 0px 0px !important;
}

my next goal is to have the hypertext change color when someone is hovering over it and so far I have done this in the CSS:

a:hover {
    color: black;
    background-color: transparent;
}

The problem is; the background color was originally #def, and it worked when hovering, but the text color remained blue #0000ff. I tried adding !important to it and I even tried making it red #FF0000.

I even went back into the html to delete the color of the text to see if it was giving priority to the blue html instead of the red CSS, but even the plain black text wouldn't change to red when I hover over it.

Am I missing something?

Upvotes: 1

Views: 1435

Answers (3)

Robbin van der Jagt
Robbin van der Jagt

Reputation: 796

That's because of this line.

<a href="www." target="_blank"><span style="color: #0000ff;">text</span></a>

Inline styling get a higher priority than css in a css file. Try adding this instead

html

<a href="www." target="_blank"><span>text</span></a>

css

span{color:#0000FF}

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

try this one:

Please Remove span style="color: #0000ff;"

then you can add span:hover

span:hover {
    color: black;
    background-color: transparent;
}

Demo here

Upvotes: 0

Pablo Salcedo T.
Pablo Salcedo T.

Reputation: 904

You have to change the span color because you have an inline style forcing the span color or remove that and use only CSS.

Example:

.entry-content a, .entry-summary a, .taxonomy-description a, .logged-in-as a, .comment-content a, .pingback .comment-body > a, .textwidget a, .entry-footer a:hover, .site-info a:hover {
   box-shadow: 0px 0px 0px 0px !important;
}

a:hover, a:hover span {
    color: black !important;
    background-color: transparent;
}
<a href="www." target="_blank"><span style="color: #0000ff;">text</span></a>

Upvotes: 1

Related Questions