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.

jqueryhtmlcss

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

Ensure the accordion is fully loaded before initializing by checking if it has been loaded before using the .html() method

One issue I am facing is that the accordion html is being injected onto a tag using .html() before the accordion initialization, resulting in the injected html appearing as plain html. Below is my script: $(function() { $( "#accordion1" ).accordion({ ...

jqueryjquery-uijquery-ui-accordion

Controlling multiple bx-sliders with a single pager using only JavaScript

Is there a way to control 3 sliders using the same pager? I attempted to use the following code but it did not work: <script language="javascript"> $('.mobile_left_mble,.mobile_right_mble,.text_btn').bxSlider({ //pagerCustom: '#bx- ...

javascripthtmlcss

The :focus pseudo-class is failing to target the input element

I'm dealing with a simple input field of type text: <input matInput type="text" placeholder="{{placeholder}}" class="input-field" [ngClass]="{'error': hasErrors}" [readonly]="isReadonly&quo ...

htmlcssangular8

Retrieve and substitute attributes using preg_replace

I'm looking to add tabs to all the properties listed here, but I am having trouble isolating the properties as $1 is not working in this case. A small tweak would solve this issue... Thank you! $css = <<<EOF body { padding: 0px; ...

phpcssfunctionpreg-replaceeof

Having issues with the functionality of jQuery's remove method?

I need help with removing specific li elements from my HTML code. Here is the snippet of HTML: This is the jQuery code I have been using: $("li").remove(":contains('undefined')"); Any assistance would be appreciated! ...

jquery

A unique flex layout with scrolling capabilities specifically designed for optimal performance in Chrome

This layout includes a header, footer, sidebar, and a scrolling main content section. You can view a demonstration of this design on Bootply. <div class="parent"> <div>HEADER</div> <div class="main"> <div class="side"> ...

htmltwitter-bootstrapcssflexbox

(Vue.js) The icon fails to be applied

<link rel="icon" href="/static/icons/apple-touch-icon.png" type="image/x-icon"> <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="16x16" href="/static/ ...

htmlvue.jsicons

What is the most effective method for verifying a selected item in Jquery UI selectable?

I'm having an issue with my image display div where users can delete selected images. The code functions correctly, but there seems to be unnecessary repetition in certain parts of it. I attempted using `$(".ui-selected").each()` to stop the ...

javascriptjquery

Is it possible that .focus() does not function on a duplicated object?

Greetings to all! I have created a form with rows of input text fields. Users can add as many rows as needed by clicking the 'add row' button. The functionality to clone() for adding rows is working perfectly. In each row, an input field can o ...

javascriptjquery

Issues with sending POST requests using jQuery AJAX in Chrome mobile

I have encountered a strange issue where a JQuery POST request works fine in mobile safari, desktop safari, and desktop chrome, but fails on chrome for ios. Here is the ajax request code that I am using: $.ajax({ url: '/data', cache: false, ...

jqueryajaxgoogle-chromepostmobile

Using JavaScript to print radio type buttons

Currently working on a web page and I've encountered a problem that's got me stumped. There are two sets of radio buttons - the first set for package dimensions and the second set for weight. The values from these buttons are assigned to variable ...

javascripthtmlcss

Handling Website Downtime with PHP Simple HTML DOM Parser

I have been extracting data from a government website for health updates in Turkey. However, if the site experiences downtime or fails to load, my own website stops displaying any content after fetching and parsing the news. Is there a way to optimize th ...

phphtmlparsinghtml-parsingsimple-html-dom

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

Ways to position a DIV on the right side of the screen using percentage margin to adjust its distance from the edge as the browser is resized

Allow me to provide a clearer explanation here: Imagine an element placed on a webpage with a margin of 10% from the left side. When the size of the page is adjusted, the margin on the left decreases accordingly - for example, 10% from 1400px - 140px, and ...

htmlcssresponsive-design

Tips for eliminating the white flash while transitioning background images with animation?

I am facing an issue with my code where the background image of the site transitions between 5 different images, but every time an animation completes and the next one starts, there's a white flash. I'm not sure how to resolve it or what I might ...

csshtmlcss-animations

Triggering a specific outcome with every user interaction involving the selection of an element

How can I trigger this effect each time the user clicks on the element using jQuery? I have added a "ripple" class upon clicking, but when I click on the element for the second time, the effect does not execute because the class has already been added. Ho ...

jqueryhtmlcss

Explain the concept of grid layout in CSS

Can you please clarify the distinctions between grid and liquid layouts? Specifically, I am interested in understanding the concept of a grid layout. Thank you in advance for your explanation. ...

css

The personalized confirmation dialog is experiencing malfunctions

I have designed my own custom dialogs using Bootstrap and jQuery, such as Alert and ConfirmDialog. Here is a sample: http://jsfiddle.net/eb71eaya/ The issue I am facing is that in the callback function, I make an AJAX call. If it returns true, I want to ...

javascriptjqueryajaxtwitter-bootstrapbootstrap-modal

Angular not executing Jquery script in included HTML files

Underneath is a simple jquery code snippet: $(document).ready(function() { $("h2").click(function(){ alert("Hello world"); }) }); After clicking on any h2 tag in the website, an alert message will display. The code functions properl ...

jqueryhtmlangularjs

The accordion's height will expand on its own when one of the accordions in the same row is

Whenever an accordion expands in the same row in MUI, the height of the accordion will automatically increase. See below for the code snippet: {[1,2,3,4,5].map((i)=> <Accordion style={{backgroundColor: '#F9F9F9&ap ...

cssreactjsflexboxmaterial-ui