The hover and active effects are malfunctioning

I can't understand why the default color for the "a" element is set to #2bb673 instead of #222. What mistake did I make? I am also using Bootstrap.

    <div class="our-work">
        <a href="#our-work" class="our-work">Our Work</a>
     </div>

CSS

 .our-work a {
      color:#222;
    }

.our-work a:link {text-decoration: none; color: #2bb673;}
.our-work a:visited {text-decoration: none; color: #2bb673 ;}
.our-work a:hover {text-decoration: none; color: #2bb673;}
.our-work a:active {text-decoration: none; color: #2bb673;}

Jsfiddle

twitter-bootstrapcsscomputer-science

Answer №1

.our-work a {} style rule applies to all states initially, and then you have the option to customize each state individually like this:

.our-work a:link {text-decoration: none; color: #2bb673;}

The a:link selector overrides the general styles set earlier.

Therefore, you can either delete the a:link style or update it to a different value like #222 as your default.

Answer №2

If you're facing an issue with your question, here's a solution to fix it:

.our-work a:link {text-decoration: none; color: #222;}
.our-work a:visited {text-decoration: none; color: #2bb673 ;}
.our-work a:hover {text-decoration: none; color: #2bb673;}
.our-work a:active {text-decoration: none; color: #2bb673;}

Make sure to note that a:link takes precedence over a, hence the need for the #222 color.

Keep in mind that a:visited pseudo-class has a green color set, so visited links will still appear green even after correcting the CSS for unvisited links.

Possible Solutions:

  1. Update both a:link and a:visited to use #222
  2. Assign different colors to each of the 4 states temporarily to identify which pseudo-class is impacting the a element. If needed, provide a detailed update on the results sought for better assistance.

Note: The provided solution works well with standard CSS, yet it doesn't remove bootstrap's default blue "visited" state.

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 the steps involved in changing a dropdown menu?

My current bootstrap dropdown list has been causing some issues, specifically with the 'Log out' link not working properly. The 'Logout' button seems to be functioning correctly, but for some reason the other one is not. Can someone ple ...

htmlcssbootstrap-4thymeleaf

What purpose does the alert-dismissible feature serve?

I am trying to implement an alert box using Bootstrap for my project <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> </head> <body> ...

csshtmlbootstrap-4

Trouble arises when attempting to establish an isolated scope within Angular alongside UI Bootstrap

My table of data is set up with AngularJS, and one of the columns is calculated using a function in the controller. On my webpage, I have a button that opens a modal. When I use UI Bootstrap to open the modal, it creates a new isolated scope (child of the ...

javascriptangularjstwitter-bootstrap

`Can a creation of this nature be accomplished?`

In my text input field, users can type messages to send to me. I'd like to add buttons on the page with symbols like "!", "XD", and "#". When someone clicks on a button, such as the "!" button, that corresponding symbol should be inserted into the tex ...

javascripthtmlcss

Firefox does not support CSS transitions

I've put in a lot of effort and even tried searching on Google, but I'm unable to find a solution to my problem: To help you understand my issue better, I have created a jsfiddle with my source code: Click here to view my Source Code Although e ...

htmlcssfirefoxtransition

Triangles positioned on the edges of a division element

I am attempting to create a DIV with angled corners, as depicted in the image below: https://i.sstatic.net/1a9LY.png So far, I have successfully implemented the top right corner using a tutorial. Here is the code snippet that accomplishes this: .lifeatb ...

css

Utilizing "Content" for Responsive Image Design in Chrome Version 33.0.1750.117

I previously implemented a method for responsive images on my website, which was working fine until the latest Chrome update. Surprisingly, it still functions properly on other browsers. //< ![CDATA[ var queries = [ ...

javascripthtmlcssgoogle-chromeresponsive-design

ShadowBox replacement for IE8

After much experimentation, I am on the verge of achieving an inset box shadow for IE8 without relying on JavaScript. Take a look at the screenshot below: https://i.sstatic.net/2kM3R.png Since Internet Explorer versions 5.5 through 8 only support Micros ...

htmlcssinternet-explorer-8box-shadow

The size of the elements inside a div should be proportional to its parent div

I am struggling with sizing elements within a div. I have set the max-width to 40% and max-height to 25%, and inside is an image that I want to be 80% of its parent div. Here is the code snippet for reference: <div className="inputbox-container&qu ...

htmlcsssass

When TTF fonts are installed on the device, they take precedence over Google fonts

I have successfully implemented the Ubuntu font from Google Fonts on my website: <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css ...

cssfontsgoogle-font-api

Enhance your inline content by adding adjacent inline blocks

My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...

css

Step-by-step guide to activating vertical scrolling for select tiers in a multi-layered fly-out navigation

Currently working on a multi-level flyout menu to be integrated into a daterange picker for selecting time periods. Check out the jsfiddle link here: https://jsfiddle.net/6t72hd4x/1/ I attempted to set overflow-y: auto; in the .inner-list class to handle ...

htmlcss

Adding additional text within the paragraph will result in the images shifting backwards when utilizing flexbox

It seems like there might be something obvious that I'm missing here, but essentially my goal is to create a footer with 2 columns and 2 rows. In each column, there will be an icon (32x32) and 2 lines of text next to it. The issue I'm facing is ...

htmlcssflexbox

Understanding JavaScript for Reading a Website's "Local Storage"

Can the local storage of one website be accessed by a different domain, or is it restricted to only the domain that saved it? ...

javascriptphphtmlcssjson

What is the best way to use jQuery to apply CSS only to elements with a specific attribute set?

Currently, I am attempting to utilize jQuery to apply specific CSS styles to elements, but only those that possess a particular attribute. The rationale behind not resorting solely to CSS is due to the immense amount of content on the site, making it impr ...

jquerycssthisattr

Using Jquery to toggle the visibility of div elements with the same structure, but ensuring only one is

Many people have posed this question. I am attempting to create a functionality where a div can expand and collapse using a +/- button. I have 5 divs with class=="expanderContent". When the function below is triggered by a click, all 5 items expand or coll ...

javascriptjqueryhtmlcss

A pair of buttons each displaying a unique div block

I am facing an issue with my jQuery script. I want to be able to click on one of the previewed text associated with a button and then have the other one close automatically. The desired effect is for the text to slide down using slideDown() and disappear ...

javascriptjqueryhtmlcssshow-hide

The container within the div element needs to extend to the full width of the webpage

Hello, I am in the process of designing a small website. So far, everything is set up well with the header, but I am facing some issues with the content divs. The problem specifically arises when trying to make the content fill the entire height of the we ...

htmlcssheightstyling

Is there a way to incorporate a bottom border into Vuetify's v-tabs component?

I am trying to achieve a specific result: https://i.sstatic.net/1Um2th3L.png This is how I accomplished it: <v-tabs> <v-tab v-for="(tab, i) in tabs" :key="i" v-bind="tab" ></v-tab> </v-tab ...

cssvue.jsvuejs3vuetifyjs3

Design featuring a fixed top row and a scrollable bottom row

I need to divide a div container into two vertical sections, one occupying 60% of the space and the other 40%. The top div (60%) should always be visible, while the bottom div (40%) should be scrollable if it exceeds its limit. I have tried different app ...

htmlcssjquery-mobile