Archived topic
Links issue
3 replies · Started by David on November 19, 2020
Viewing posts 1–4 of 4
Hi All,
Still having issues with global links.
On the page lined below there are images which are getting the hover background effect.
Not sure how to NOT them - I have tried adding img and figure to NOT, experimenting!
But I also have not(.gb-button) as well so not sure how to have two Nots ?
Also, how would you configure this so the CSS below applies to all links except the home page ?
Below is my current CSS
TIA, Dave
.site-content a {
background-color: transparent;
}
.site-content a:link:not(.gb-button) {
color: inherit;
text-decoration: none;
transition: all 750ms cubic-bezier(0.4, 0, 0.2, 1);
transition-property: all;
transition-duration: 750ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0s;
border-bottom: 1px solid #d9e0ca;
font-weight: bold;
}
.site-content a:visited:not(.gb-button) {
color: inherit;
text-decoration: none;
border-bottom: 1px solid #d9e0ca;
font-weight: bold;
}
.site-content a:hover {
color: #0d47a1;
background: #bbdefb;
}
Hi there,
if you want that style to apply only to Links within your text content try this:
.site-content p a {
background-color: transparent;
}
.site-content p a:link {
color: inherit;
text-decoration: none;
transition: all 750ms cubic-bezier(0.4, 0, 0.2, 1);
transition-property: all;
transition-duration: 750ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0s;
border-bottom: 1px solid #d9e0ca;
font-weight: bold;
}
.site-content p a:visited {
color: inherit;
text-decoration: none;
border-bottom: 1px solid #d9e0ca;
font-weight: bold;
}
.site-content p a:hover {
color: #0d47a1;
background: #bbdefb;
}Ah of course, thanks - I'll implement that!
Dave
You're welcome
This archived topic is closed to new replies.
