Please refrain from altering the color of my flag on hover

I am working with a table that has rows marked with flags.

Below is the CSS I have used:

<table class="hovered no-border" data-url="@Url.Action("General", "Transport")">
    <tbody>
        <tr>
            <td><input type="checkbox" value="0"/></td>
            <td>TNB.12/00125</td>
            <td><i class="icon-flag-3 fg-color-grayLight"></i> Blah blah blah</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="0"/></td>
            <td>TNB.12/00128</td>
            <td><i class="icon-flag-3 fg-color-grayLight"></i> Blah blah blah</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="0"/></td>
            <td>TNB.12/00129</td>
            <td><i class="icon-flag-3 fg-color-grayLight"></i> Blah blah blah</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="0"/></td>
            <td>TNB.12/00119</td>
            <td><i class="icon-flag-3 fg-color-yellow"></i> Blah blah blah</td>
        </tr>
    </tbody>
</table>

table.hovered tbody tr:hover {
  background-color: #ececec; 
}
table.hovered tbody tr td:hover i {
  color: #9a9a9a !important;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: 'iconFont';
  font-style: normal;
  speak: none;
  font-weight: normal;
  display: inline-block;
  text-decoration: inherit;
  margin: 0 2px;
  -webkit-font-smoothing: antialiased;
  border: 1px transparent solid;
}
.icon-flag-3:before {
   content: "\e14f";
}

One of the lines, specifically #119, is emphasized with a yellow flag.

The Issue: I do not want the color of the yellow flag to change when the row is hovered over. How can I prevent this?

Thank you.

Answer №1

To change the color of the grey flag, you can simply use the following code:

table.hovered tbody tr td:hover i.fg-color-grayLight {
  color: #9a9a9a !important;
}

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 is the best way to position a rectangle on top of a div that has been rendered using

I recently started using a waveform display/play library known as wavesurfer. Within the code snippet below, I have integrated two wavesurfer objects that are displayed and positioned inside div elements of type "container". My goal is to position my own ...

What class is utilized when multiple classes are specified?

When an element has two classes assigned to it and the CSS for the two classes conflict with each other, which one takes precedence? Is there a method to determine which one will be used? For instance: <p class='red small'>Some Text Here& ...

What is the best way to choose the element directly beneath a specific element using jQuery?

I am facing a challenge where I need to manipulate HTML content using only jQuery, without changing the original structure. The requirement is to display and slide down content with a specific class (current) upon clicking on an h1 tag. However, I am strug ...

Grid of domes, fluid contained within fixed structures and beyond

I've been grappling with this issue for a while now, and have had to rely on jQuery workarounds. I'm curious if there is a way to achieve this using CSS or LESS (possibly with javascript mixins). The page in question consists of both fixed and f ...

Ensuring the validity of a signed cookie in Node using Express

I'm currently working on incorporating signed cookies in Node's express module. I've reviewed the documentation, but I'm struggling to understand how to properly verify them. My understanding is that verification must occur on the serve ...

Having trouble with JQuery's .prop function not unchecking a checkbox?

I have been experimenting with different solutions in order to uncheck a checkbox when another checkbox is checked. Unfortunately, none of the methods I've tried seem to be working effectively... Currently, my code looks like this: $("#chkBox1").cli ...

The Jquery Index() method often results in a return value of -

I have developed a function in JavaScript that creates HTML content. Within the test(test1) function, I am checking if test1.Test__c is null and changing the color accordingly. The line ".table-striped > tbody > tr.testcss" is responsible for changin ...

What is the best way to reposition the caret within an <input type="number"> element?

How can I make the caret move when an input is clicked? The code I found works with text, but not with number. Also, is there a way to pass the length without specifying a value (e.g. 55) in the parameters? HTML <input type="number" name="cost" value= ...

Organize rows in the table while maintaining reactivity

A challenge I'm facing with a web app (Angular SPA) is that it displays a large table without the ability to sort. To work around this issue, I've managed to implement sorting via the console. However, re-inserting the rows after sorting causes t ...

I struggle to format a classic HTML form dropdown menu that is populated using JavaScript

Hey everyone, I'm having an issue with styling a drop down menu that is populated by JavaScript. I've tried different things but nothing seems to be working. Any suggestions on how I can style the elements in the drop down? <form action="" me ...

Tips for pausing keyframes animation on its final animation frame

Is there a way to halt my animation at the 100% keyframe? What I'm attempting to accomplish is animating these boxes so that when you click on the top one, it moves to the bottom and vice versa. Any suggestions or ideas on how to achieve this? <h ...

Step-by-step guide on positioning mid and bottom text using Bootstrap grid system

After searching and trying various solutions, I am still unable to get the desired output. My goal is to use grids in Bootstrap to set the footer layout with the class "link-footer" positioned at the middle height of the div and the class "footer-copyright ...

Ways to center a div with position:relative vertically on the page

What is the best way to center a position relative div vertically within its parent element? For example: <div class="parent"> <div style="position:relative;" class="child"> </div> </div> Any suggestions on how to vertic ...

What is the best way to apply a class to the initial div using jquery?

I have the following HTML code: <div class="main"> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> </div> <div class="main"> <div class="sub"></div> <di ...

Utilizing CSS naming conventions to bring order to class inheritance

I'm a bit unclear about the rationale behind using this specific CSS structure: h2.class-name It seems like you could simply use .class-name and apply that class to the h2 element: <h2 class="class-name">Title thing</h2> Unless it&apos ...

Troubleshooting inactive CSS hover animation

Greetings! I'm facing an issue with a CSS hover animation. Here are two demos I've created: In the first DEMO, the animation works perfectly. However, in the second DEMO, it doesn't seem to be functioning. On the second demo, there are two ...

Go to a distant web page, complete the form, and send it in

As the creator of Gearsbook.net, a social network for Gears of War players, I am constantly striving to improve the site's functionality. Currently, it is quite basic and in need of updates. One highly requested feature by users is the ability to lin ...

Separate the paragraph within an HTML string and eliminate any paragraph that is empty

I need help splitting a string of HTML into an array list, with the condition that the paragraphs should not be empty. Each paragraph should contain some normal text, and if it only contains HTML text without any normal text like: <htmltag>&nbsp; ...

Inquiry regarding the grid structure within my react application

When attempting to arrange my images in a grid layout, I encountered a strange issue after applying CSS grid. The grids ended up being organized horizontally instead of how I wanted them to be - two or three images per line. The component hierarchy is as ...

Display the HTML/CSS layout following the JavaScript window.open action

Encountering issues with printing output in an opened window using JavaScript. I'm creating a new document through window.open and including CDN links to Bootstrap files. While everything appears fine in the opened window, when attempting to print (XP ...