Is it possible to remove filters from image links but still apply filters to links within the same div?

Is there a way to use hue-rotate to change the colors of my text links without affecting my image links? I have tried removing the effect from images only, but haven't been successful. Any suggestions on how to achieve this? I created a JavaScript button to alter colors in my design, and I want the text links to change when pressed, while keeping the images unaffected.

.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;
}
javascripthtmlcss

Answer №1

It's important to note that while you are applying a filter to a, the filter is being cleared on img. This behavior is due to the :has pseudo-selector, which is still in draft and has no Pure CSS Solution available at the moment. To reset the hue-rotate filter on all a elements containing an img, JavaScript assistance is required.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The width of table columns is altered upon the second rendering in JQuery DataTables

Is there a way to prevent JQuery DataTables cells from extending width after adding hyperlink to cell? I am facing an issue where I have two tables on the same page. The first table column has a link which populates the second table. It works fine when th ...

htmljquerycssajaxdatatables

The Bootstrap modal needs to display the specific table row that was retrieved from a JSON file in Angular

My table is populated using ng-repeat with data sourced from JSON. The table includes columns for name, phone, and time. When I click on a name, a bootstrap modal appears. However, I need the selected name to be displayed within the bootstrap modal itsel ...

javascriptangularjsjsontwitter-bootstrap

Utilizing the Flatpickr's onChange event to dynamically update the end date

I am utilizing two date pickers, start_time and end_time, both implemented with the flatpickr() function. When a date is selected for the start_time, I want the end_time to automatically update to match that value. To achieve this functionality, I am atte ...

javascriptruby-on-railsflatpickr

Issues have been encountered with Angular 5 when trying to make required form fields work properly

Just created my first Angular app using Angular 5! Currently following the documentation at: https://angular.io/guide/form-validation. Below is the form I have set up: <form class="form-container"> <mat-form-field> <input matInput pl ...

javascriptangulartypescript

Optimizing background images for various mobile devices using PhoneGap

Currently in the process of creating a cross-platform app for iOS and Android using Phonegap. Facing an issue with implementing a background-image as it gets cropped or distorted on various mobile devices due to size differences. Managed to address this ...

androidioscsscordovaphonegap-build

Tips for updating the value within a textfield in HTML

I am looking to dynamically update the value displayed in my Revenue textfield by subtracting the Cost of Goods from the Sales Price. I have included an image of the current layout for reference, but I want the Revenue field to reflect the updated value af ...

javascripthtmlangulartypescripttextfield

React component for a background image with a gradient overlay

I'm facing an issue trying to incorporate a background image for a div along with a color overlay. In plain CSS, the code would typically look like this: .backgroundImage { background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rg ...

cssreactjsionic-framework

The JWT authentication appears to be functioning properly when tested on "postman," however, it is encountering issues on the website

When I attempt to verify a user's authentication using tools such as "Postman" or "Insomnia," everything functions correctly (when I set the bearer). However, when I try to log in through the website, I encounter an error here: function authenticateT ...

javascriptnode.jsexpressjwtbackend

Personalized Svelte interface Slider tag

I am trying to customize the label of a smui/slider in a tick marks and discrete slider. While I found instructions on how to do this using material web components at https://github.com/material-components/material-components-web/tree/v13.0.0/packages/mdc- ...

javascriptmaterial-uisvelte

Bootstrap 4 experiences issues with modal dialogs

I am experiencing an issue with my code not working on Bootstrap 4. When I click on the 'overview' button, the page darkens but the dialog does not appear. This functionality worked fine with the old version of Bootstrap. Can someone please assis ...

javascriptcssrubybootstrap-modalhaml

What are the steps for including and excluding components in Parallax JS?

When working with Parallax JS: I am trying to modify the components within the <li> tags of my menu, but I am unsure how to do so without restarting the plugin. I cannot seem to find the destroy command. Currently, I am using the JQuery version of ...

javascriptjqueryparallaxparallax.js

Elm div contenteditable loses cursor position after content update

Is there a way to maintain the cursor position while typing in a contenteditable div? I'm utilizing Elm to generate a text box and require the text within it to undergo processing with every input. The rationale behind opting for a contenteditable di ...

htmlcontenteditableelm

Altering the hue of various stroke patterns

I've encountered an issue where I want to create skill bars that display my skills in percentages. Luckily, I found a great code that allows me to do this. Although I would prefer to do it myself, I haven't come across a good tutorial that teache ...

javascripthtmlcss

Utilize AJAX or preloading to enable dynamic updates for items within a select element

Forgive the length of this question, but I want to provide all relevant information. Within our extensive web application, we have a generic code for inputting addresses. These addresses can vary - business address, user address, online shop delivery addr ...

javascripthtmlajax

Adjust the size and orientation of an image according to the dimensions of the window and the image

As I delve into HTML and Javascript, I am facing a challenge with resizing an image based on the window size. The goal is for the image to occupy the entire window while maintaining its aspect ratio during resizing. Additionally, if the window size exceeds ...

javascriptcsshtmlcanvas

Issue with Calendar Control not loading in Internet Explorer 9 when using ASP

I have been trying to incorporate a calendar control in my code that selects a date and returns it to a text field. It worked perfectly fine on browsers prior to IE 8, but I'm facing issues with IE 9. Can someone help me troubleshoot this problem and ...

javascriptvbscriptasp-classic

Update the content of the document element by assigning it a lengthy string

I'm utilizing JQuery to dynamically assign content to a div element. The content has numerous lines with specific spacing, so this is the approach I am taking: document.getElementById('body').innerHTML = "Front-End Developer: A <br/> ...

javascriptjqueryhtmlinnerhtml

Cheerio - Ensure accurate text retrieval for selectors that produce multiple results

Visit this link for more information https://i.stack.imgur.com/FfYeg.png I am trying to extract specific market data from the given webpage. Specifically, I need to retrieve "Sábado, 14 de Abril de 2018" and "16:00". Here is how I did it using Kotlin an ...

javascriptjqueryweb-scrapingweb-crawlercheerio

This artice discusses the addition of a numeric sequence value to the end of an element's id along with

Any thoughts on why this strange phenomenon is occurring? I am encountering a peculiar issue with an aspx page that utilizes a repeater to populate data. It seems that a numeric sequence value is being added to all element ids generated by .net. Here are ...

htmlasp.net.netrepeater

What is the best way to increase the spacing between inline-block elements?

Just to clarify, I am not looking to delete space between inline-block elements - rather, I want to insert it. My goal is to create a grid of menu items that can accommodate 2, 3, or 4 items per row, and I hope to achieve this using media queries. Is the ...

htmlcss