Guide to adjusting icon color when hovering over an <a> element

When hovering over a specific area designated by the <a> tag, I want the icon's color to change. However, despite my efforts, the color remains the same unless I hover directly over the icon using the following CSS code: 

.sidebar .menu li a .icon:hover{background: #ecedf2;color: #3d5654;}
This means that I have to precisely hover over the icon itself in order to see the desired effect. My goal is to change the icon's color while hovering over the entire <a>tag area. Please advise if there are any errors in my approach.

HTML

<div class="sidebar">
  <ul class="menu">
    <li>
      <a href="#"
        ><span class="icon"><i class="fas fa-desktop"></i></span
        ><span class="text">Dashboard</span></a
      >
    </li>
  </ul>
</div>

CSS

* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Jost', sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  height: 100vh;
  width: 100wh;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  display: grid;
  grid-template-columns: auto 8fr;
  grid-template-rows: 80px auto 50px;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
}

.sidebar {
  grid-area: sidebar;
  width: 260px;
  background: #2c343b;
  height: 100%;
}

.sidebar .menu {
  padding-right: 30px;
  padding-left: 20px;
  margin: 0;
  overflow: auto;
  transition: all 0.5s;
}

.sidebar .menu li a {
  color: #ecedf2;
  display: block;
  width: 100%;
  line-height: 60px;
  text-decoration: none;
  padding: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1px;
  transition: 0.5s;
}


.sidebar .menu li a .icon {
  color: #ecedf2;
  width: 25px;
  display: inline-block;
}

.sidebar .menu li a:hover,
.sidebar .menu li a.active {
  background: #ecedf2;
  color: #3d5654;
}
htmlcss

Answer №1

This code snippet will help you accomplish the desired effect

.sidebar .menu a:hover i{
        background: #ecedf2;
        color: #3d5654;
}

Answer №2

Perhaps this suggestion could be beneficial to you. I recently incorporated a CSS selector specifically for the icon.

.sidebar .menu li a:hover i{
   color:red;
}

Answer №3

  • Here is a suggestion for you to try...

* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Jost', sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  height: 100vh;
  width: 100wh;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  display: grid;
  grid-template-columns: auto 8fr;
  grid-template-rows: 80px auto 50px;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
}

.sidebar {
  grid-area: sidebar;
  width: 260px;
  background: #2c343b;
  height: 100%;
}

.sidebar .menu {
  padding-right: 30px;
  padding-left: 20px;
  margin: 0;
  overflow: auto;
  transition: all 0.5s;
}

.sidebar .menu li a {
  color: #ecedf2;
  display: block;
  width: 100%;
  line-height: 60px;
  text-decoration: none;
  padding: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1px;
  transition: 0.5s;
}


.sidebar .menu li a .icon {
  color: #ecedf2;
  width: 25px;
  display: inline-block;
}

.sidebar .menu li a:hover,
.sidebar .menu li a.active {
  background: #ecedf2;
  color: #3d5654;
}
<div class="sidebar">
  <ul class="menu">
    <li>
      <a href="#"
        ><span class="icon"><i class="fas fa-desktop"></i></span
        ><span class="text">Dashboard</span></a
      >
    </li>
  </ul>
</div>

Answer №4

To accomplish this effect, utilize the :hover pseudo-class in your CSS code:

a:hover { color: value; }

// The 'a' represents the element to which the hover effect will be applied // // Refer to MDN documentation for more details on pseudo-classes //

Answer №5

consider this alternative :

.sidebar .menu li a .icon i:hover {
     color:red;
}

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 measures can be taken to stop LESS partials from compiling independently?

When working with LESS, I utilize partials that are included (@include) into the main LESS stylesheet. A common issue I face is that each partial ends up compiling to its own CSS file, leading to project clutter. In SASS, if a file is named with an unders ...

csslessphpstorm

Exploring the intricacies of using jquery text() with HTML Entities

I am having difficulty grasping the intricacies of the jquery text() function when used with HTML Entities. It appears that the text() function converts special HTML Entities back to regular characters. I am particularly uncertain about the behavior of thi ...

javascriptjqueryhtmlhtml-entities

Table with empty cells in HTML

This question may seem easy, but for those who haven't used HTML in a while, it can be quite frustrating. You can view my HTML table at the following link: https://jsfiddle.net/mr_muscle/Lw5o7ary/ Here is the HTML code: <table> <thead&g ...

htmlcss

Find the HTML elements within an XDocument that need to be replaced and converted into Json format

XML contains HTML tags that need to be removed using XDocument. Is there a way to identify nodes with HTML tags and replace them throughout the entire document? Below is a sample of the XML structure: <?xml version="1.0" encoding="utf-8"?> <myFie ...

c#htmljsonxmllinq-to-xml

How can you customize the default select box in a Django template using a passed parameter?

I have a situation where I am passing a dictionary to a Django template and need to set a default value for a select box. The context is that this template serves as an 'edit product' page for a previous 'add product' form. When the use ...

htmldjangoselectdefault

javascript conceal a div when clicked elsewhere

I am trying to implement two JavaScript functions: 1) Displaying a DIV (welcomeDiv) when clicking on a button; 2) Hiding the div by clicking outside of 'welcomeDiv' container. function showDiv() { document.getElementById('welcomeDi ...

javascripthtmlcss

When I type in the TextBox, the CheckBox value should be deactivated if it is unchecked

Whenever I attempt to input text into the textbox associated with my checkbox, the checkbox automatically becomes unchecked. How can I prevent this from happening? <span id="TRAVEL_TYPE_1"><input id="TRAVEL_TYPE_0" type="checkbox" onclick="Update ...

javascriptjqueryhtmlinternet-explorerfirefox

Is there a way to prevent Qt's setStyleSheet function from automatically reverting back to default colors on my form and buttons?

In my program, I have a total of 152 QPushButtons, with each button representing an item and having a color that indicates its status. The issue I'm facing is that when the code below colors a specific button based on user input, it also resets all ot ...

c++cssqtstylesheet

Guidelines for providing the image file path in an external JavaScript file for creating a Flask API

I am looking to modify the attribute value in the index.html file from an external JavaScript file that is linked to the HTML file. The structure of my folders is as follows: folder structure When I try to specify the path from the HTML file using: {{url ...

javascripthtmlajaxflask

PrimeNG ToolTip fails to appear

I am experiencing issues with getting tooltips to display properly on my webpage. When I hover over the tooltip trigger, the screen seems to expand with a vertical scrollbar appearing, but no tooltip is shown. It appears as though the tooltip might be tryi ...

javascripthtmlcssangularprimeng

I need to style a blockquote so that it floats to the right, but I also want it to be

I want to enhance the appearance of my blockquotes by giving them a different color background and ensuring they stand out from the regular text. Although using float:right helps achieve this effect, I prefer not to force the blockquote to the right side o ...

csscss-floathtml

Customize the text color of select list options in Angular 5

Is there a way to style the foreground colors of select list options differently in this dropdown code? <select id="tier" class="form-control" [(ngModel)]="tierId"> <option *ngFor="let m of tierList" value="{{m.tier}}" > {{m.option ...

htmlcssangularangular5

Eliminate time data from the Google Map

I am looking to customize the appearance of my Google Map routes on my website by removing the time info box. <iframe src="https://www.google.com/maps/embed?pb=!1m46!1m12!1m3!1d204152.56634698433!2d174.4756264675282!3d-36.9170414111374!2m3!1f0!2f0!3f0! ...

jqueryhtmlcssgoogle-maps

Shooting star css animation featuring pre and post effects

Trying to create a falling star using CSS animation. I made a star with a pseudo element, but I'm having trouble setting the animation in the pseudo-element. i{ position: relative; width: 0; height: 0; border-left: 12px solid transpa ...

htmlcss

Retrieving all elements that contain the specified search value with Jsoup

I am currently developing an Android app that involves working with HTML. Specifically, I need to extract part of an HTML body, retrieve attributes, and search for values containing a specific element. While I have successfully accomplished the first two t ...

javaandroidhtmljsoup

The jQuery datetimepicker does not have compatibility with HTML5 validation features

I currently have a date-time field in my form: <input type="text" class="form-control datepicker" required /> $('.datepicker').datetimepicker({ datepicker: true, timepicker: true, lang: 'pl' }); Each field in my form i ...

htmljqueryvalidationjquerydatetimepicker

Creating checkboxes in an HTML table based on the output of a query

I'm currently working on creating a dynamic table that displays query results, and I have come across this code snippet that successfully generates the table. However, I would like to add an extra column to each row that contains checkboxes. Is there ...

phphtmlmysqlcheckboxhtml-table

Enhance your data tables with responsive design by incorporating side panels on either side

In this example, I have created a basic datatable table using JavaScript. The functions to open and close the panels are easily defined, and the data for the table is specified using a JavaScript variable. The CSS is used to style the left and right panel ...

javascripthtmljquerycssweb

How come my padding isn't working on an anchor tag, but it works fine on a button element?

Consider this code snippet: .ul { list-style-type: none; } .li { display: inline-block; border: black solid 1px; margin-left: 20px; } .btn { padding: 20px; text-transform: uppercase; } <ul class="ul" ...

htmlcss

"Utilizing CSS3 columns to create a layout with one column

I am looking to divide my webpage into multiple columns, starting with three but potentially adding more in the future. My current approach involves using Flexbox to create equal-width columns: <style> .container { display: flex; } .column { ...

htmlcss