2

I've got a CSS prob i'd love some help with.

My site (www.melodylakerart.com) has a 'Read More' link in its cookie notice bar (to the right of the privacy notice).

The 'read more' link is currently only visible on mouse over. Since the cookie bar is black I therefore assume the link text is black untill mouseover

I just want to make the text a colour other than black so you can see the link without having to mouseover. I've tried the below CSS with no luck. Can anyone help?

 .cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4 !important;}

.cn-privacy-policy-link {color: #feb8b4;}

.cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4;}

Tweet Tweet
  • 21
  • 1

2 Answers2

0

Link color can be changed via a:link or under a specific class .cn-privacy-policy-link a:link

for example:

a:link {
  color: red;
  text-decoration: none;
}

a:visited {
  color: green;
}

a:active {
  color: black;
}

a:hover{
  color: #bada55;
}

.test a:link{
   color: yellow;
}
<a href="www.google.com">Example</a>
<div class="test"><a href="www.yahoo.com">Yellow link</a></div>

You can also change the link color on hover by a:hover or the link color after being clicked by a:visited or while being clicked with a:active

Itay Gal
  • 10,706
  • 6
  • 36
  • 75
0

The problem is that you have this:

input[type="submit"], button, .button {... color: #000000!important; ...}

And that is the classic reason why !important is a bad practice.

If all other parts work as expected, you need to trigger one of the element's classes. For instance: cn-privacy-policy-link {color: #feb8b4!important;} will work.

A. Meshu
  • 4,053
  • 2
  • 20
  • 34