Is it possible to conceal a link once it has been visited?

I am trying to figure out how to remove a link from a page once it has been visited. However, I am facing privacy restrictions with the :visited pseudo-class. Is there a way to achieve this without using display: none?

For example:

.someclass a:link {display:block;}

.someclass a:visited {display:none;}

Thank you for your help.

Additional detail: I will also be including external links, so I cannot use jquery cookies or local storage. The links will be sent via email, so using jquery onclick in the "X" class is not an option.

Answer №1

Changing the color attribute is the only option available through the :visited pseudo-class due to a past security vulnerability. JavaScript used to be able to detect if a user had visited a URL by measuring the computed style of a link, but this has since been fixed in recent years. It's best to avoid relying on this method for the functionality you're looking for. For more details, check out this article:

Answer №2

To achieve a similar effect, you can set the visited link to have the same color as the background with this CSS:

a:link {display:block;}
a:visited {color:white}

Check out this example on http://jsfiddle.net/NGSs8/5/

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

Issue with bootstrap 4 CDN not functioning on Windows 7 operating system

No matter what I do, the CDN for Bootstrap 4 just won't cooperate with Windows 7. Oddly enough, it works perfectly fine on Windows 8. Here is the CDN link that I'm using: <!doctype html> <html lang="en> <head> <!-- Req ...

What is the best way to conceal a row when a particular field is devoid of content?

Is it possible to hide an entire table row if a field is empty? For example: If a certain field is empty, I want the entire row to be hidden, either using JavaScript or jQuery. I have tried some methods but none of them fully hide the row. Is there a way ...

Master the art of manipulating JSON arrays with jQuery

Looking to extract the information with a specific key and payment value from a JSON array generated by an API request. The desired data is: "Key":"PCP","Payment":170.08 The array in question looks like this: {"VehicleResults":[{"Id":"0","FinanceProduct ...

PHP variables not being properly passed back to AJAX/jQuery POST on success despite using json_encode()

I've been grappling with this issue for hours. I am attempting to make a <div id=""data_friends> and a hidden input field update dynamically using AJAX. Here is the structure of the div tag: <div class="friends-tab-list" id="data_friends"> ...

Error Encountered when Using JQuery AJAX: Unexpected Identifier Syntax Issue

I've been struggling with a strange error for quite some time now. I want to believe that this is one of those errors where the solution will magically appear, but only time will tell. Here's the piece of code causing the issue: var images = ...

Is it possible to convert (HTML and CSS3 generated content for paged media) into a PDF format?

Would it be possible to convert a HTML document styled with CSS3 Generated Content for Paged Media into a PDF format? If such an application does not exist, what alternatives can I consider as the foundation for developing a converter? Thank you ...

What could be causing the jQuery news ticker to malfunction on my site?

I recently made some changes to my main page by embedding HTML and adding the following code/script: <ul class="newsticker"> <li>Etiam imperdiet volutpat libero eu tristique.</li> <li>Curabitur porttitor ante eget hendrerit ...

Error: Your request could not be processed due to a Bad

url = "/IPM/KPI/Add"; input = new FormData($('#frmKPI').get(0)) ; PostAjax: function (isForm, url, input, divErrID, btnID, isSuccessFunction, isFailedFunction, NoModalAlert, isAsync) { var contentType = isForm ? false : "appli ...

A layout featuring two columns: the right column has a fixed width, while the left column is fluid

I am in need of a simple solution: 2 columns with the right column having a fixed size. Despite searching on stackoverflow and Google, I have not been able to find a working answer that fits my specific context. The current approach is as follows: div.con ...

Match precisely with a specific constituent of the adjacent cell

Is there a way to accomplish this layout using tables? I'm open to suggestions, such as utilizing flexbox, if it's not possible with tables. In a table with two columns, the left column contains text while the right column holds an image and add ...

Is there a way for me to determine the value or array that has been passed in the form?

I am facing a challenge and need help solving it. I have a project that involves interacting with a database, where I created a CRUD HTML table for data manipulation. There are 15 tables in the relative database, and I need to insert, delete, and edit reco ...

Having trouble retrieving the ID of a button?

I'm attempting to retrieve the ID of a button, but I seem to be getting the ID of the surrounding div instead. This is not the desired outcome. Here's my current approach: HTML <div class="container container-about container-login"> ...

Tips for inserting an AJAX response into the corresponding list item:

When the page loads, I am attempting to send an ajax request that will fetch data for each li element by extracting the href link inside them using the jQuery each() method to generate a dynamic URL for the ajax request. Although I am able to retrieve dat ...

problem with the visibility of elements in my HTML CSS project

How do I prevent background images from showing when hovering over squares to reveal visible images using CSS? h1 { text-align: center; } .floating-box { float: left; border: 1px solid black; width: 300px; height: 300px; margin: 0px; } div ...

Retrieve the current date and time data from the database and populate it into a datetime input field

I've encountered an issue while trying to fetch a Datetime value from my database and insert it into an html input with a date type. Unfortunately, the input field appears empty. $resQuery = mysql_query("SELECT * FROM reserveringen WHERE id = $ID"); ...

Choosing a specific value for a selected row in a jQuery table

One of the challenges I'm facing is setting the selected value of a select box in row 5 of a table with a class called .tablesorter-filter, rather than an input box. Can anyone offer guidance on how to accomplish this? $('.tablesorter-filter&apo ...

Having trouble with the dynamic form not submitting correctly using AJAX in PHP?

I am facing an issue in my code while trying to dynamically generate a form in a table and submit it. The problem is difficult for me to solve. $(document).ready(function() { $('#btnsummary').on('click', function() { ...

Viewing a Google Charts graph upon the loading of a web page

Utilizing the Google Charts library, I have incorporated a graphic on my web page that is dynamically added using AJAX into a <div> element. To display the graph when the page loads, I have written the following code: <script type="text/ ...

Leveraging the power of Javascript/jQuery to manipulate form

On my website, I have implemented a form that requires a customized response for certain zip codes. To achieve this, I am developing a code that validates the first 3 digits of the entered zip code against a predefined array in my system. Although the code ...

Track the cursor's movement

Looking to add an animation effect to my website. I want the navbar to follow the cursor within a limited space when hovered over. Check out this example for reference: . Here's the code I have so far, but it's not quite achieving the desired res ...