I am using huerotate to change colors of my text links in my div, the problem is, it is also applying to my image links. I have tried removing them from images only(what I want) but I just can't figure it out. Any ideas? (I have made a JS to have a button to change colors on my design, and I want the text links to change when it is pressed, but not have the images change.)
.scontent {
max-width: 100%;
margin: 20px 0px;
padding: 5px 5px 5px 10px;
}
.scontent a {
color: var(--links);
filter: hue-rotate(var(--hue-rotate));
}
.scontent a:hover {
color: var(--links-hover);
filter: hue-rotate(var(--hue-rotate));
}
.scontent a img {
filter: none !important;
}
CodePudding user response:
The thing is, you are applying filter to a
, but clearing the filter on img
. This is the case for :has
pseudo-selector, but its currently in draft, so there is no Pure CSS Solution. You need to take help of JavaScript, to reset the hue-rotate
filter on all a
that has img
inside it.
let imgArr = document.querySelectorAll('.scontent a img');
[...imgArr].forEach((img)=>{
img.parentNode.style.filter = "hue-rotate(0deg)";
})
:root{
--links: #ff0000;
--hue-rotate: 90deg;
}
.scontent {
max-width: 100%;
margin: 20px 0px;
padding: 5px 5px 5px 10px;
}
.scontent a {
color: var(--links);
filter: hue-rotate(var(--hue-rotate));
}
.scontent a:hover {
color: var(--links-hover);
filter: hue-rotate(var(--hue-rotate));
}
<div >
<a href="#">Text Link </a>
<a href="#"><img src="https://picsum.photos/200/200" /> </a>
</div>
CodePudding user response:
You are a life saver, thank you! I just needed to add the line of javascript with "a img" and it now applies to my whole site. You are a godsend, thank you.