Alter the appearance of an element when another element is being hovered over

I am currently working on the homepage of and specifically within the "OUR SERVICES" section.

My goal is to have both the text and the Font Awesome icon change color when hovering over a services box. I've managed to get the text to work, but I'm struggling with getting the icon to change as well.

If anyone could provide some guidance on the CSS code needed to achieve this effect, it would be greatly appreciated.

Below is the current CSS code I have for the text, but I just can't seem to make it work for the Font Awesome icon:

.service-nav-tab li a:hover, .service-nav-tab li.active a {
  background: linear-gradient(132deg, #e31372, #12a9c1, #5086bb, #6a10b4, #d49c10);
    background-size: 400% 400%;
      animation: BackgroundGradient 40s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
htmlcssfont-awesome

Answer №1

It seems that the use of pseudo elements (such as FontAwesome's method for adding icons, e.g. .fa .fa-fire:before) doesn't preserve the background colors you've assigned to the a tag.

One solution could be to include the background and -webkit-background-clip properties directly in the pseudo element itself. I've personally found success by doing this while testing your CSS in dev tools.

.service-nav-tab li a:hover .fa:before {
  background: linear-gradient(132deg, #e31372, #12a9c1, #5086bb, #6a10b4, #d49c10);
  background-size: 400% 400%;
  animation: BackgroundGradient 40s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip;
}

Edit: I can't explain why this resolves the issue or why it initially occurs. However, after further experimenting with different properties, I discovered that removing elements from the document flow can lead to similar issues, even affecting the h4 containing your main text.

Answer №2

If you want to add the hover effect along with active or display all the code for service-nav-tab, follow these steps:

Consider the following code snippet:

.service-nav-tab li.active a {
  background: linear-gradient(132deg, #e31372, #12a9c1, #5086bb, #6a10b4, #d49c10);
    background-size: 400% 400%;
      animation: BackgroundGradient 40s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.service-nav-tab li a:hover {
    background: linear-gradient(YOUR CUSTOM SETTING HERE);
    }

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

What are some other options to using position: absolute when working within an inline position:relative?

I've been struggling with this problem for some time now and just can't seem to find a solution. The issue involves a series of position: relative spans enclosing text, along with a position: absolute span set to right: 0;. I expected the second ...

htmlcsscross-browsercss-position

When using JavaScript, I have noticed that my incremental pattern is 1, 3, 6, and 10

I am currently using a file upload script known as Simple Photo Manager. Whenever I upload multiple images and wish to delete some of them, I find myself in need of creating a variable called numDeleted (which basically represents the number of images dele ...

javascriptjqueryhtml

A div element with a set width that contains an inline child element

I recently created a basic HTML document with two elements: a div with a fixed width, and an image placed after it. According to my understanding, images are inline elements, so I expected the image to appear next to the div on the right side since there ...

htmlcss

issue when Internet Explorer is formatting text following an image

My website functions perfectly in Chrome and Firefox, but it's not rendering correctly in IE. I've fixed most of the bugs, but one issue remains unresolved. Currently, the image is displayed with the text bunched up next to it, while the table ap ...

htmlcss

Do you know of a solution to fix the Stylelint error regarding semicolons when using CSS variables?

React.js Css in JS(Emotion) The components above are part of this setup. Here is the configuration for Stylelint: module.exports = { extends: [ "stylelint-config-standard", "./node_modules/prettier-stylelint/config.js", ], ...

javascriptcssreactjsstylelintscss-lint

How to upload several files with identical file names using dropzone.js

I've been using dropzone.js with great success, but I ran into an issue when trying to upload multiple files with the same name. For example, uploading photos from an iOS device where they all have the name "image.jpg." While I can change the file nam ...

jqueryhtmldropzone.js

Tips for creating a responsive carousel slider for images

No matter how much I've tried, I can't seem to find a solution on how to make my image responsive along with the caption. Below is my HTML code: <section id="banner"> <div class="banner-bg"> <div class="banner-bg-item ...

javascripthtmlcsscodeigniter

Utilizing jQuery to toggle between adding and removing CSS classes for element identification

Below is a JavaScript/jQuery function that I have: function hideShowHiddens(action){ $('.hidden_col').each(function(){ if(action == 'show'){ this.removeClass("hidden"); }else{ ...

javascriptjqueryhtmlcssjsp

Generate dynamic DIV elements and populate them with content

Can you assist me in getting this code to function properly? My goal is to dynamically create elements inside a div and fill each element with a value fetched from the database through a server-side function. I'm unsure if there's a better approa ...

javascripthtmlgoogle-apps-scriptdynamic-content

What is the best way to implement a conditional data-attribute tag in order to trigger JavaScript functionality?

Is there any way to conditionally apply JavaScript or jQuery code in an HTML Template? For example, if a data-id attribute with the value "no-copy" is found inside the body tag, certain JavaScript code will be applied. To explain it more simply, I have J ...

javascripthtmljquerycss

Selecting the initial and final elements in a list without utilizing pseudo-classes

Currently, I am in the process of designing a custom MUI styled component and I have encountered a challenge. I want to apply extra styles specifically for the first and last child elements. The issue arises because MUI utilizes the emotion styled library, ...

cssreactjsmaterial-uistyled-components

Exploring the Functionality of POST in AJAX Requests

I'm facing an issue where the data is not displaying on my page even though I am using a Github URL and Ajax POST. Can anyone help me identify what needs to be fixed in the code below? <div id="content"> </div> window.onload = ...

htmljqueryjsonajax

Uncovering classes and selectors in CSS files that match an element with JavaScript

Trying to explain my idea with an example since it's a bit tricky. Imagine we have this HTML code: <ul> <li id="myli" class="myclass">Hello</li> </ul> along with the corresponding CSS: .myclass{ color:red; } li.m ...

javascriptjquerycss

Having trouble getting Bootstrap 5 to work with a position-relative row?

I am having trouble placing the * sign on the left side. Whenever I try to do so, it only works if I remove the row class. <!doctype html> <html lang="fa" dir="rtl"> <head> <meta charset="utf-8"> ...

htmlcssbootstrap-5

Using an object as a parameter in the Include Template Tag in Django

I've run into an issue while developing a website in Django. I'm using the 'include' template tag and trying to pass an object into it. However, it seems to be passing the dunder str method of the object instead. {% include 'functi ...

pythonhtmldjangoobjecttemplates

What are the different approaches for creating a website that adapts to different screen sizes and devices

The popularity of responsive web design is growing rapidly. While many recognize Twitter Bootstrap as a top framework, there are other options worth exploring. Several impressive examples of responsive websites, such as Smashing Magazine and CSS Tricks, ...

htmlcssresponsive-designmedia-queries

Dynamically insert JavaScript and CSS files into the header by using the append method

Due to a specific reason, I am loading CSS and scripts into my head tag using the "append" method. For example: $("head").append('<script type="application/javascript" src="core/js/main.js"></script>'); I'm asynchronously pulli ...

javascriptjqueryhtmlcssajax

Error in Formatting Labels in CSS

I currently have a form with textboxes that include validation. Everything works smoothly when clicking the save button for the first time, but if we fill out the textboxes and then remove the text, an error message is displayed on the textboxes. You can v ...

javascriptcss

How can I assign a distinct background color to individual sections in Chart.js?

Wanting to Customize Grid Background Colors in Line Chart using react-chartjs-2 I am looking to have different background colors for each grid in my Line chart. Is this functionality possible with the react-chartjs-2 library? This is the desired appearan ...

javascriptcssreactjscanvaschart.js

Using CSS, eliminate the drop-down menu from the main navigation on Squarespace

While working on my Squarespace website, I've been impressed with how the FAQ page/questions are structured. However, a drawback is that it creates a clunky drop-down menu when hovering over the FAQ tab in the main navigation. You can see an example ...

cssdrop-down-menusquarespace