Removing a filter from image links, while applying filter to links in the same div?

user_16986623 0
Viewed 43

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;
}
css html javascript
1 Answers

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 class="scontent">
  <a href="#">Text Link </a>
  <a href="#"><img src="https://picsum.photos/200/200" /> </a>
</div>

user_92561890
Related