I am having trouble with the CSS Hover and Active styling on my website

Below is the code for my navigation bar:

<ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="portfolio.html">PORTFOLIO</a></li>
    <li><a href="resources.html">RESOURCES</a></li>
    <li><a href="testimonials.html">TESTIMONIALS</a></li>
    <li><a href="about.html">ABOUT</a></li>  
    <li><a href="contact.html">CONTACT</a></li>  
   </ul>
  </nav>

Here is the CSS code:

a: hover {
    color: brown;
}

a: active {
    color: #1490A5;
}

I am attempting to change the color of the active link and the color when hovering over it, but it isn't working as expected.

htmlcss

Answer №1

Eliminate the gap between the two dots and the pseudo class

a:hover {

   text-color: brown;

}

a:active {

   text-color: #1490A5;
}

Answer №2

Eliminate the space between selector and pseudo:

a:hover {
  ^----------------Remove

a:active
  ^---------------Remove

a:hover {
color: brown;
}

a:active {
color: #1490A5;
} 
<ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="portfolio.html">PORTFOLIO</a></li>
    <li><a href="resources.html">RESOURCES</a></li>
    <li><a href="testimonials.html">TESTIMONIALS</a></li>
    <li><a href="about.html">ABOUT</a></li>  
    <li><a href="contact.html">CONTACT</a></li>  
</ul>

Answer №3

A proper formatting tip for CSS elements is to ensure there are no spaces before :active and :hover. Your code should resemble the following:


a:hover {
  color: brown;
}

a:active {
  color: #1490A5;
}

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

Define the term "Parse Error" as it pertains to CSS

i'm encountering an issue while attempting to validate my CSS. Despite trying to validate using direct input (copy and paste), the error persists. In my pursuit to find a solution, I researched on Google only to discover that it could be related to sp ...

htmlcss

Button-operated lightbox image slider

I am currently developing a website on WAMP where users can store images and view them in a lightbox effect. I have successfully implemented the lightbox effect, but I am facing challenges with moving between images within the lightbox. <html> <? ...

javascriptphpjqueryhtmlcss

Tips for adding a gradient to your design instead of a plain solid color

I stumbled upon a snippet on CSS Tricks Attempting to replace the green color with a gradient value, but unfortunately, the value is not being applied. I have tried using both the fill property and gradient color, but neither has been successful. Here is ...

javascripthtmlcsssvg

Toggling dropdown menus with conditional Jquery statements

I am experiencing some discomfort. :) I've been working on a calorie calculator that includes a dropdown for various dietary preferences. Currently, when a user clicks the button, the dropdown appears and disappears when clicking outside the button. ...

javascriptjqueryhtmlconditional-statements

Jquery's remove function fails to function correctly when used on a cloned element

I am facing an issue where I have a list of rows that need to be deleted. However, when I attempted to use jQuery's remove function, it only removed the original row and not its clone. My goal is for the parent element of the parent to be removed when ...

javascriptphpjqueryhtml

I am in search of a way to implement horizontal scrolling in Bootstrap 4

I am trying to implement a horizontal scroll feature in Bootstrap 4 with the following code, but I'm having difficulty achieving it. <div class="scroll-horz"> <div class="row"> <div class="col-md-4"> Test </div> < ...

htmlcssbootstrap-4

How to implement div scrolling on button click using Angular 4

Is there a way to make the contents of a div scroll to the left when one button is clicked and to the right when another button is clicked? I've tried using ScrollLeft, but it doesn't seem to be working... Here's the HTML code: <button ...

javascripthtmlcssangular

The website code lacks a dynamically generated <div> element

When using jQuery to dynamically add content to a "div" element, the content is visible in the DOM but not in the view page source. For example: <div id="pdf"></div> $("#btn").click(function(){ $("#pdf").html("ffff"); }); How can I ensur ...

javascriptjqueryhtml

What can I do to prevent my HTML/CSS/jQuery menu text from shifting when the submenu is opened?

After encountering numerous inquiries regarding the creation of disappearing and reappearing menus, I successfully devised a solution that functions seamlessly on desktop and tablet devices. My approach involved utilizing the jQuery .toggleClass function w ...

jqueryhtmlcssmenu

Using jQuery.dataTables to choose all rows except the final column

I'm utilizing a table with jQuery.dataTables. I have a requirement to input dates in the last column. However, when I click to input a date, the row becomes deselected. The following code is meant for selecting all rows: Displayed below is the DataT ...

jqueryhtmlcssdatatables

Exploring the differences between React state and CSS :hover in the context of a dropdown menu that is accessible to both desktop users (via mouse) and

I have come across a dilemma regarding a dropdown menu that needs to cater to both Desktop/PC users (with mouse) and Mobile devices (with touch). After considering my options, here are the proposed solutions: OPTION 1 One approach is to implement it usi ...

javascriptcssreactjsdrop-down-menuhover

Setting a default value within an input tag: A step-by-step guide

const [userData, setUserData] = useState([]); const handleUserInfo = (id) => { fetch(`https://602e7c2c4410730017c50b9d.mockapi.io/users/${id}`) .then(res => res.json()) .then(data => setUserData(data)) } <inpu ...

javascripthtmlreactjs

When CSS Display table is resized at media query breakpoints, it causes other cells to disappear

This is a discussion on creating a responsive image gallery website with images of different sizes and no margins or paddings. The issue at hand is that the .showcase class hides at a specific @media breakpoint when resizing, but there is a desire to displ ...

htmlcssresponsive-design

Verifying that phone numbers and email addresses are accurate prior to submitting the form

As a PHP newcomer, I apologize if my question appears somewhat naive. Currently, I am working on a contact form that is functioning well, but I need to implement validation for two specific fields: the phone number and the email address. For the phone numb ...

phphtmlformsvalidation

What is the method to alter the color of an SVG source within an image tag?

I am currently working on a component that involves changing the color of an SVG icon from black to white when a color prop is given. export class CategoryIconComponent extends React.Component { static displayName = 'CategoryIcon'; state = ...

javascriptcssreactjssvgecmascript-6

Excessive iterations occurring in JavaScript for loop while traversing an array

After addressing the issues raised in my previous inquiry, I have made significant progress on my project and it is now functioning almost exactly as intended. The main purpose of this website is to iterate through the World Of Tanks API to generate cards ...

javascripthtmljsonapifor-loop

What is the best way to change the font size in HTML?

After carefully analyzing the image provided, I encountered an issue while attempting to incorporate the code display:block. However, no changes were reflected. Can you identify what may be causing this discrepancy in my text? How can this issue be recti ...

htmlcss

Having trouble implementing the center edge effect in this CSS design

Looking for help with CSS to center the edges of a family tree design. Has anyone experience in working on styling family trees? *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tree { ...

javascripthtmlcss

I am finding that the text I am creating using context.fillText keeps getting distorted within the canvas

I am attempting to place text inside a canvas element. The HTML markup for the canvas is as follows: <canvas id="leaderboard2" style="position: fixed; right: 1250px; top: 140px; width: 230px; height: 330px;"></canvas>. Des ...

javascripthtmlcanvas

Could really use a hand getting this card grid to be more responsive

Recently, I delved into using HTML & CSS for work. However, I encountered a major hurdle: creating responsive Grid card elements. I have four card elements in a column, each with text that increases opacity when hovering over the card. When viewed on a t ...

htmlcssresponsive-designgrid