Unable to update the list's text color to a white hue

I have a list with glyphicons that turn black when I hover over them, but I want them to appear white instead. My list is using bootstrap.

Here is the list:

<ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;font-weight:bold;">
    <li><a href="#"><i class="glyphicon glyphicon-user"></i></a></li>
    <li><a href="#"><i class="glyphicon glyphicon-bell"></i></a></li>
    <li><a href="#"><i class="glyphicon glyphicon-search"></i></a></li>
    <li><a href="#"><i class="glyphicon glyphicon-log-out"></i></a></li>
    <li><a href="#"><i class="glyphicon glyphicon-menu-hamburger"></i></a></li>

htmlcssbootstrap-4

Answer №1

a.glyIcon{
   color:gray !important;
 }

a.glyIcon:hover{
   color:orange !important;
 }
<ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;font-weight:bold;">
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-user"></i>List 1</a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-bell"></i>List 2</a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-search"></i>List 3</a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-log-out"></i>List 4</a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-menu-hamburger"></i>List 5</a></li>
</ul>

Add the class name for your <a> tag

html

<ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;font-weight:bold;">
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-user"></i></a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-bell"></i></a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-search"></i></a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-log-out"></i></a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-menu-hamburger"></i></a></li>
</ul>

CSS

a.glyIcon{
   color:black !important;
 }

a.glyIcon:hover{
   color:white !important;
 }

Answer №2

https://i.sstatic.net/OEZ77.png

It appears that your white color setting is being overridden by a more specific bootstrap selector in your code.

.navbar a:hover{ color:white;   }

Additionally, it seems like your HTML does not have the navbar class, causing the selector to not take effect. You might want to consider changing the CSS class name to .navbar-nav instead.

Answer №3

To achieve the desired effect, you must apply a style when hovering over the specific target element.

.navbar-nav li a.glyphicon i {
  color: green;
}

.navbar-nav li:hover a.glyphicon {
  color: blue;
}

.navbar-nav li:hover a.glyphicon i {
  color: red;
}
<ul class="navbar-nav">
  <li>
    <a class="glyphicon">
      Anchor Tag
      <i class="glyphicons">sample</i>
    </a>
  </li>
</ul>

Answer №4

ul li {
  color: #000000;
  list-style: none;
  transition: all 0.5s linear;
}
ul li:hover {
  color: #ffffff;
}
<ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;font-weight:bold;">
    <li><a href="#"><i class="glyphicon glyphicon-user"></i></a>text1</li>
    <li><a href="#"><i class="glyphicon glyphicon-bell"></i></a>text2</li>
    <li><a href="#"><i class="glyphicon glyphicon-search"></i></a>text3</li>
    <li><a href="#"><i class="glyphicon glyphicon-log-out"></i></a>text4</li>
    <li><a href="#"><i class="glyphicon glyphicon-menu-hamburger"></i></a>text5</li>
</ul>

This one is worth checking out.

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

"Automatically scroll back to the top of the page once new content

Is there a way to automatically scroll the page to the top after content has been loaded via Ajax? Here is the code I am using to display the content: $(document).ready(function () { var my_layout = $('#container').layout(); $("a.item_l ...

phpjqueryhtmlajax

What is the best way to determine the number of subchildren within a parent div using JavaScript or jQuery?

Can anyone assist me with counting the number of child divs inside a parent div using JavaScript or jQuery? I'm not very experienced in these languages. Below is my code snippet: $(function () { var parent = document.getElementById('parent& ...

javascriptjqueryhtml

Excessive padding on labels and insufficient padding on input fields in Bootstrap 4 mobile view

Having a simple password field using Bootstrap grid classes: <div class="container"> <div class="row"> <label class="col-sm-2" for="passwordField">Password</label> <input class=&q ...

htmlcssbootstrap-4

What makes it possible for Vue v3 to handle variables that are undefined?

We are in the process of developing a web application that monitors analytical changes and updates them in real time. While this may not be crucial information, we thought it would be worth mentioning. If you visit Vue.js's official website at https: ...

javascripthtmlvue.js

Adjust the color of a DIV based on the text value retrieved from an external source

I am looking to dynamically change the text color between red and green based on a numeric value received from an external source (API). If the value is greater than or equal to 50, it should be displayed in red. If it's less than 50, then it should ...

javascripthtmlcsscolors

What is the best way to ensure that all components within a Container automatically inherit its calculated width?

Check out my tab panel setup on Sencha fiddle. The buttons are dynamically added to a tabs container with a layout of hbox within a vbox. The width of the tabs container is determined by the flex property. I attempted to set each button's width to &a ...

javascripthtmlcssextjsextjs4

Exploring z-indices in event bubbling

JSFiddle: https://jsfiddle.net/uLap7yeq/19/ Issue Let's examine a scenario where there are two elements, canvas and div, positioned in the same location using CSS. The div has a higher z-index compared to the canvas, but how can we make sure events ...

javascriptjqueryhtmlcss

Determining the height of a Bootstrap column in relation to another element

Utilizing the grid layout from bootstrap, I have the following structure: <div id="prof_cont_enclose"> <div class="row"> <div class="prof_cont_row"> <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2 prof_elem"&g ...

javascriptjqueryhtmlcsstwitter-bootstrap

Strange Division Split in the Code. Link to JSFiddle Provided

I encountered a strange line break between two divs while working on a website design. The issue is with the gap between the divs offersContainer and recentWinnersHeadlineContainer. Here's the JSFiddle link: http://jsfiddle.net/d593fdea/ Although the ...

htmlcssspacespacing

How can I anchor a div Banner saying "Get 50% off our products" to the Navbar directly above it?

Bootstrap Question: How can I attach the div Banner ("50% off of our products") to the Navbar directly above it? The structure looks like this: <Navbar> </Navbar> <div> <span>Discount: 50% off of our products </span </di ...

javascriptcssfrontendbootstrap-5react-fullstack

Can the text linked to a specific element be shown on the screen?

I've been delving into the world of Selenium and C# lately, and I'm curious to know if there's a way to retrieve the text associated with a specific element. For instance, consider this snippet of HTML that contains the desired content: &l ...

c#htmlseleniumselenium-webdriver

Having Difficulty with Splicing Arrays in React?

Currently working on learning React and trying to develop my own mini-app. I'm basing it very closely on the project showcased in this video tutorial. I've run into an issue with the comment deletion functionality in my app. Despite searching va ...

javascripthtmlcssreactjsbabeljs

Issues with the OnChange function not properly functioning in duplicate input fields

I've designed a form that allows for adding or deleting rows, effectively cloning input fields. One of the input fields utilizes Jquery Ajax to retrieve its value. However, upon adding an extra row by cloning the parent row to generate a child row, th ...

javascripthtmljqueryajax

Using PHP variables in JavaScript to access getElementById

I have multiple forms displayed on a single PHP page. They all follow a similar structure: <form id="test_form_1" action="test_submit.php" method="post" name="test_form"> <label>This is Question #1:</label> <p> &l ...

phpjavascripthtml

Navigate divs with varying z-index values

I want to change the z-index of 3 divs by toggling them using jQuery, but I'm not sure how to do it. What I want is to click a button that relates to a specific div and increase the z-index of that div so the content inside it is shown. Currently, all ...

javascriptjqueryhtmlcss

Tips on customizing styles for Material UI components using CSS override techniques

Currently, I am tackling a project that requires the use of Material UI components. To simplify things, let's focus on a basic functional component that includes two Material UI elements: a Button and a Text Field. import React from 'react'; ...

cssreactjsmaterial-ui

Troubleshooting: Jquery show effects not functioning as expected

Currently, I am facing an issue where I am attempting to display a fixed div using the show function of jQuery. Although the show function itself is working properly, when I try to include an effect from jQuery UI, it does not seem to work as expected. Bot ...

javascriptjqueryhtmlcss

Using the last child as a parent element in Selenium with JavaScript

I am trying to access the input element of the last child in this code snippet. Specifically, I want to retrieve the text Text Reply - Delete. <div class="priority-intent-div"> <div class="row add-priority-intent-div"> ...

javacssseleniumselenium-webdrivercss-selectors

I attempted to implement the hover effect on a custom Tailwind CSS class I created, but unfortunately, it does not appear to be functioning as expected

For example: .btn {bg-blue-500 text-2 text-orange-300} .btn2 {bg-orange-500 text-2 text-blue-300} Attempted Solution: Edit: Apologies for the oversight in not including the code I was working with... it was late at night. < button className="btn ...

cssnext.jshovertailwind-css

How to dynamically add an HTML element following a specific div class in Typescript and Angular

Is there a way to dynamically insert a component into a div after a specific element with a designated class name using TypeScript? <div class ="{{order.orderId}}"> <div class="enter-here"></div> <other html elements here> < ...

htmlangulartypescript