The anchor hover state will persist even after clicking the link

What if I need to create navigation top menu buttons with anchor tags, each having a specified href? I've already styled the hover effect for each button, but when I click on a link, the hover effect disappears. How can I ensure that the hover effect remains even after clicking the link, preferably using CSS?

button a:hover {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}

Answer №1

Give this a shot:

.btn:hover {
    border:1px solid #000;
    box-shadow:1px 1px 0px 8px #1fb6dc;
} 
.btn:active
{
        border:1px solid #000;
        box-shadow:1px 1px 0px 8px #1fb6dc;
}

Answer №2

Your CSS code contains incorrect syntax. Below is the corrected version:

a.button:hover {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}

a.button:active {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}

The <a> element has a class of button.

Answer №3

When crafting your query, you've utilized the selector:

button a:hover

This selection is likely not what you need, as it targets an element inside a button in its hover state. It may be more suitable to have your .button class on the actual link and then target them with:

a.button:hover

which selects an element in its hover state.

To address your initial question about styling the link when it is "active" or after being "activated", utilize the :active pseudo-class selector. Additionally, using the :focus selector ensures that individuals navigating via keyboard also notice the style change.

a.button:hover,
a.button:focus,
a.button:active {
    border: 1px solid #000;
    box-shadow: 1px 1px 0px 8px #1fb6dc;
}

The above code chains all the selectors together, eliminating the need to duplicate styles. If applicable based on your other CSS rules, you could omit the "a" element selector:

.button:hover,
.button:focus,
.button:active {
    border: 1px solid #000;
    box-shadow: 1px 1px 0px 8px #1fb6dc;
}

If this method proves effective, it can enhance the flexibility of your CSS (refer to object oriented css).

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

Adjust the size of both the parent div and child textarea dynamically to ensure they are always equal without setting specific height or width values

To ensure that the height and width of a parent div that contains a child textarea are exactly equal, you can utilize the following CSS code snippet: https://jsfiddle.net/BwVQZ/7/ <div> <textarea></textarea> </div> div{ hei ...

Creating a Triangle Slider Component with React and Material-UI (MUI)

Struggling with creating a price control using react js and MUI, similar to the image below: https://i.stack.imgur.com/ZP8oc.png I've searched online for libraries or solutions, but haven't found anything that works. ...

Tips for centering a <div> vertically within another <div> ?

I have a project to develop a shopping cart, and I am currently working on aligning my item total in the center of its container. Here is the code snippet I have so far: .itemInfo { display: table; width: 100%; } .itemTotal { display: table-cel ...

Tips for centering content vertically within a div with specific dimensions?

Is there an optimal technique to center content vertically within a defined width/height div? In this illustration, two contents with varying heights are present. What would be the most effective way to vertically center both using the .content class? (En ...

Background image investigation

As a newcomer to web development, I am facing challenges in achieving the desired look for my first website. Despite spending over 2 hours researching and testing various CSS properties, I have not made much progress. What I aim for is quite straightforwa ...

Accessibility considerations for anchor tags with no content

Currently on our website, there is a component that utilizes an <a> tag with a background image set by the following CSS: a.class-name::after { content: url('image.png'); } The anchor tag itself has no visible content (appears as < ...

What could be causing my CSS navbar with display: inline-block to not center properly?

How can I use display:inline-block in CSS to center my navigation bar? nav { position: fixed; width: 100%; } nav ul { width: 100%; margin: auto; } nav ul li { display: inline-block; margin: 5px 20px 5px 20px; text-align: center; } ...

I'm having trouble displaying the image in its full size using thickbox with jquery

Having trouble displaying images in their actual size with thickbox. Any solutions? <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>WildFire</title> <script type="text/javascr ...

Is it possible to reach this result without relying on Modernizr?

Due to personal reasons that I won't delve into, my goal is to replicate the functionality of this menu : demo : http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ However, I want to achieve this without using Modernizr and poss ...

Maintaining a set margin with a width that can adjust relative to the parent container's size

Is there a way to achieve this layout using only CSS and HTML? I want to create 2 divs, one nested inside the other. The parent div should span 100% of the window width, while the child div should have fixed margins and fluid width filling the remaining s ...

ngInfiniteScroll Activates on Every Scroll Occurrence

Implementing ngInfiniteScroll for endless scrolling on my website has required me to set the height of the outer div to a specific value. Without this adjustment, the Infinite Scroll feature activates unintentionally. <div style="height: 1px"> &l ...

Tips for enclosing the "body" element using a background image

Hey there! I'm a newbie web developer with a casual approach to coding. I'm trying to jazz up my menu by adding a background image, but no matter what I do, it keeps showing the default white background. Can anyone lend me a hand? If you're ...

Which file is the optimal placement for the Bootstrap directory: 'header.php' or 'function.php'?

Having dabbled in WordPress Theme templates for a while, I've decided to try my hand at creating a theme from scratch. After uploading the Bootstrap features onto my server, I'm pondering whether it's better to call the Bootstrap.css files ...

How can I properly display each option of a ngx-bootstrap-multiselect on a separate row?

After upgrading my Angular 8 project to Angular 9, I decided to experiment with the ngx-bootstrap-multiselect plugin. I noticed that the way the items are displayed on a single line is causing some display issues, such as checkboxes appearing to the right ...

Is it possible to apply a personalized scrollbar design to the Autocomplete Listbox component in Mui?

I am struggling to implement a custom scroll style in Autocomplete Listbox. https://i.sstatic.net/MifSm.png After multiple attempts and thorough research, I have been unsuccessful in achieving the desired result. Here is my most recent code: <Aut ...

Using JavaScript and jQuery to replace an image when scrolling

I have a website menu that functions similar to this example: https://jsfiddle.net/sinky/XYGRW/ (found here on stackoverflow) My query is that the designer would like the logo in the navigation bar (home button) to be replaced with a smaller icon. Not jus ...

Guide to utilizing Bootstrap v4 SCSS edition in a Bower project

Recently, I have been using the SASS/SCSS version of Bootstrap #3.3.6 but I just found out that they released version 4. While there is a lot of information on how to use Bootstrap v4 (non SCSS) in projects, I'm having trouble finding resources on ho ...

What is the reason behind using a solid color background image on this site instead of a background-color hex code?

Why opt for a solid background color image instead of using the CSS style background-color? I came across a website at that used a solid background image from . What are some advantages of choosing this approach? ...

What is the best way to create a scrollable nested div?

Link to Image My goal is to keep the red section fixed while allowing only the blue section to scroll when there is overflow. The red section consists of two divs. I have attempted using position: fixed to achieve this, but encountered issues such as ove ...

Evenly distribute top and bottom padding within a fixed-height border using CSS

I'm facing a challenge with centering the content vertically on an online certificate that users can print out. The main issue lies in aligning the inner wrapper (#wrapper) inside the outer border (#outerBorder), which has a fixed height to ensure pro ...