Adjust the color of the font icon within a button when hovering over it

On the bottom of my website (still in development) , there are 3 buttons with an arrow icon preceding the text. The arrow is created using an icon font and I would like it to change color (along with the button text) when hovered over.

Any suggestions on how to accomplish this?

This is the HTML code:

<a class="footerbutton"><span class="footerlist">X</span>Request a Quote</a>

This is the CSS for button:hover:

a:hover.footerbutton {
background-color: #B61618;
color: #ddd;
border: none;
text-decoration: none;
}

And this is the CSS for the footerlist span class when hovered over:

.footerlist:hover {
color: #ddd;
 }

Answer №1

To easily change the color of the icon within the button when hovered over, you can target it using the following CSS code:

.hoverButton:hover .icon {
   color: #888;
}

Answer №2

Here's a solution that should function as intended:

a:hover.footerbutton:hover .footerlist {
    color: #ddd;
}

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

Tips for transforming a JSON object (originated from jquery-css-parser) into properly formatted CSS code

Currently, we are utilizing a jQuery plugin in our project to convert CSS to a JSON object. The plugin can be found at the following link: Now, we have a requirement to convert the JSON object back to CSS in string format. Unfortunately, the plugin we ar ...

SharePoint 2013 on a mobile device does not support scrolling within iframes

Recently, I set up a SharePoint 2013 website with a few iframes. However, when I access the site on my mobile devices (iPad and Android), I am unable to scroll through the entire page by touching within the iframe. I attempted to solve this issue by inclu ...

Clicking on text triggers image display

My journey in coding is just starting and I have a good understanding of the basics of HTML, CSS, Javascript, and jQuery. I am trying to make an image appear when I click on text but struggling with the implementation. I'm working on a restaurant web ...

Tips for expanding an input to fit the width of a div without altering the dimensions of a preceding span element

Let me explain, I have a form that includes a span and an input: <form onSubmit={e => handleSubmit(e)}> <Box className='form_box'> <span> <a href="/cd ...

The positioning of the parent element shifts as a result of the CSS

What causes a vertical position change in buttons with content floated left or right? Take this example http://jsfiddle.net/8ff6dhou/ <button>aaa</button> <button><div style="float:left">bbb</div></button> <button> ...

Tips for showcasing an image partially with primefaces/jsf

Looking to display just a single icon from a sprite image? Here is how you can do it using jsf/primefaces: If you tried the code below but ended up displaying the complete image, try adjusting the background-position values: <p:graphicImage value="/re ...

Challenges with displaying css/bootstrap classes within angular2

Experiencing difficulties with CSS/Bootstrap integration when displayed in an angular2 component. When attempting to display the CSS and HTML content in the Index.html file (with proper CSS and JS references), everything functions correctly. However, once ...

Tips for positioning a label at the top of a table row in an asp.net C# application

I am facing an alignment issue in my asp.net page with a table that contains a label and a textbox. Despite trying various methods, the label consistently displays at the bottom of the row. How can I ensure that the label is aligned to either the center or ...

The log out button is unresponsive and does not function properly

I am having trouble positioning the logout button on the left toolbar. I have tried using the position property, but it is not responsive. When I resize the Chrome window, the button disappears. I also attempted to use margin, but that did not work either. ...

Utilizing Material UI's React framework for maintaining uniform grid column heights

Take a look at the image provided for context. I am facing an issue with two div elements, where one should occupy 20% of the total browser height and the other should take up 80%. Currently, I am utilizing Material UI Grid for positioning, which looks lik ...

Tips for creating a CSS transition that reverses direction

Is there a way to create a hover effect where a border appears at the bottom of an element when it is being hovered over, and then retracts back when the mouse leaves the element? I've managed to get the border to appear on hover using CSS, but I&apos ...

What might be the reason for jQuery not functioning in Internet Explorer 11?

Working on developing a slideout menu for my website using jQuery. It functions perfectly in Chrome, but encountering issues in Internet Explorer (IE11). Extensive search hasn't provided a solution yet. Seeking assistance and any help would be highly ...

Craft a stunning transparent border effect using CSS

I am trying to achieve a unique border effect for an element using CSS, where the transparency is maintained against the background: This is the desired outcome: https://i.stack.imgur.com/6Z1MU.png However, the border I am currently able to create looks ...

Is there a way to align a button in the center of the browser's footer?

Removing these two elements will enable the image to display properly, however, it does not stay aligned with the footer when viewed in a browser. Here is a preview of how it looks: Below is the CSS code along with the HTML: <style> body { ...

Setting objects in parallel in HTML involves using the display property along with the value

Creating two sign-up forms using HTML and CSS Bootstrap. Want them to be parallel, tried using the position tag but there is unwanted space created between the forms. View the output How can I prevent this circle of space from being generated? <main cl ...

Padding-left in InfoBox

Currently, I am in the process of developing a map using Google Maps API3 along with the InfoBox extension available at this link I have successfully implemented an overall padding to the Infobox using the following code snippet: var infoOptions = { disa ...

Run a PHP function using <button onclick=""> tag

Is it possible to trigger the execution of a PHP script when clicking an HTML button? I am aware that simply calling a PHP function directly from the button's onclick event like this: <button onclick="myPhpFunction("testString")">Button</butt ...

Tips for positioning two divs side by side in block formation

I'm attempting to display two distinct div elements as blocks, one for the name and the other for the names. Here is the Fiddle The names block should be displayed as a separate block next to the name div, regardless of screen responsiveness. How ca ...

Hover to reveal stunning visuals

Can anyone help me figure out how to change the color of an image when hovered over using HTML or CSS? I have a set of social network icons that I want to incorporate into my website, and I'd like the icon colors to change when the mouse moves over th ...

Creating a design with two divs split by a diagonal line using CSS

Is there a way to make two divs span the full width of the page while being divided in half by a diagonal line using CSS? I am working on a slider and once completed, I need to add content to both parts. Any ideas on how to accomplish this with two divs? ...