Maintain the appearance of the selected hyperlink

Currently, I'm working with a list of links that are dynamically called using PHP. Whenever these links are clicked, the page refreshes to load the content of the link. However, my goal is to keep the link styled in the same way as when it's hovered over.

An example of how the link appears:

<a href="editfiles.php?file=pages/something.html">something.html</a>

The CSS styling for the link is as follows:

a:hover {
    font-weight: 700;
    color: #039AD2;
}

a {
    color: #777;
    font-weight: 500;
}

I'm currently unsure about the best approach to achieve this consistent styling between hover and normal states of the link.

Any assistance on this matter would be greatly appreciated!

htmlcss

Answer №1

To improve the appearance of your links, consider reorganizing your CSS code as shown below:

a {
    color: #777;
    font-weight: 500;
}

a:visited,
a:hover,
a:active {
    font-weight: 700;
    color: #039AD2;
}

By making this change, your already visited links and currently active links will appear similar to hovered links.

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

In a trivia game implemented in JavaScript, only the initial response from an array of objects will be considered as true, instead of focusing on the correct answer

Currently, I am working on a trivia game with four answer buttons. Oddly, the condition only returns as true when the first answer button (index 0) is clicked, even if it is actually false. I suspect there might be a bug in the "answer" variable somewher ...

javascripthtmlarraysfunctionobject

What's the best way to target an input that's appearing as it slides in from the edge of the screen?

My webpage has an element called #cols that is three times wider than the <body>. This element contains three columns, each exactly as wide as the <body>. When a button is clicked, the #cols element slides over by the width of one column while ...

javascripthtmlcssonfocus

What is the best way to divide an HTML table into two sections?

I'm looking to organize my data into a table with two separate sections, one on the left and one on the right. For example, if I have 20 rows of data, I want to display the first 10 rows on the left side with headers and the remaining 10 rows on the r ...

htmlcsstypescriptbootstrap-4angular7

Attempting to transfer a list of search findings from Django to JavaScript

I've been working on passing an array of MySQL query results from Django to JavaScript, but I encountered an issue where the page source displays an array of strings instead of the desired query results. Below is my Django code snippet: resultFEs = [ ...

javascriptjqueryhtmldjango

Show various attachment file names using jQuery

Utilizing jQuery, I've implemented a script to extract the filename from a hidden field and then append it to the filename class in my HTML. filenameCache = $('#example-marketing-material-file-cache').val().replace(/^.*[\\\/ ...

javascriptjqueryhtml

What is the best way to create a layout with two images positioned in the center?

Is it possible to align the two pictures to the center of the page horizontally using only HTML and CSS? I've tried using this code but it doesn't seem to work: #product .container { display: flex; justify-content: space-between; flex-w ...

javascripthtmlcssfrontend

Aligning a title and a subheading in a horizontal manner

I want to align my h3 headings with my h5, using Bootstrap, so they are on the same line. UPDATE: I aim to leverage existing Bootstrap functionality and avoid modifying CSS unless absolutely necessary. Here is a screenshot illustrating what I mean: https ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Ways to resolve navbar toggler issue in Bootstrap 4

My problem lies in creating a responsive navbar using bootstrap. On smaller screens, the toggler in the navbar ends up overlapping the logo instead of aligning to the left. I've attempted to add containers around the elements to fix this issue but to ...

htmlcssbootstrap-4

Utilizing the selected option value from a drop-down menu in an input field

In my setup utilizing phpmyadmin within Xampp, I have configured two tables: Table 1: Category with columns cat_id and cat_name (where cat_id acts as the Primary Key) Table 2: Item with columns item_id, item_name, item_price ... cat_id (where item_id is ...

phpmysqlhtmlselectphpmyadmin

The CSS content spills beyond the edge of the screen

I am facing an issue with aligning my content in the center as it is currently shifting to the right side and going off the screen. Below is the code snippet I am working with: <?php /* Template Name: About Us */ $aboutheading = get_field('abou ...

htmlcsswordpress

Adjusting the page view when a collapse is opened

I am working on a website that features 3 images, each of which opens a collapse below with an embedded iframe website inside when clicked. I am trying to implement a function where the site automatically scrolls down to the opened iframe when an image is ...

javascripthtmlcssbootstrap-4

A dynamic display featuring four columns that showcase unique content every day of the week

As a beginner in coding, I am attempting to design a page with 4 columns that will showcase different titles and descriptions each day of the week. My goal is to have a set of titles and descriptions displayed on Monday, a different set on Tuesday, and so ...

javascripthtmlcss

The three-dimensional object created using Three.js depicts a split torus design with a striking

I have a unique goal of splitting shapes such as a torus, circle, triangle, etc., using a custom plane. Once the shape is split into two parts, each part should be draggable separately. Currently, I am able to split the torus, but I'm facing some iss ...

javascripthtmlthree.js3dwebgl

Is the accuracy of the alsoResize functionality in Jquery UI Resizable questionable?

After removing the 'alsoResize' option, I found that the behavior remains unchanged. Upon resizing the main element, I noticed that the black border of the bottom element, 'marquee,' often shifts out of alignment with the dashed white ...

javascriptjquerycssjquery-uiresizable

What is the best way to send multiple values to a PHP function through an AJAX request?

I wrote the following code snippet: var name= "theName"; var surname= $('#surname').val(); $.ajax({ url: 'SaveEdit.php', type: 'post', data: { "callFunc1": whichOne}, success: funct ...

phphtmlajax

Chrome field history is causing text input fields to malfunction

When using a regular text input field, I typically expect to see a history of my past entries by double clicking on it in Chrome. However, we have some fields rendered with Angular JS on a page that do not display any history items when double clicked. I ...

javascripthtmlangularjsgoogle-chrome

Discovering additional element information while utilizing the 'Sortable' feature

My Current Objective: In my setup, I have a 'calendar' comprising 5 columns, each column containing 5 separate divs known as timeslots. The main purpose here is to show appointments in these specific timeslots and utilize JQuery's Sortable ...

javascripthtmlajaxjquery-uijquery-ui-sortable

Using Webpack to Compile Sass (and keep class names local)

It's been a long journey trying to configure my Webpack setup to compile Sass, and the process has become quite overwhelming. In my quest for answers, I encountered numerous Github issues, Stackoverflow threads, and blog posts discussing how to integr ...

javascriptcssreactjswebpack

I am unable to move HTML data to PHP

Here is my HTML code: <form action="test.php" method="get> <input type="text" name="text" /> </form> And this is my PHP code: <html> <head> <title>Result</title> </head> <body style="background: ...

phphtmlxampp

Generating and retrieving a file using PHP

I'm currently working on creating a .html file and then downloading it. Here's the problem I'm facing: First, I check if the file exists, and if it does, I delete it and create a new one. However, when I try to generate the file and downloa ...

phphtmldownload