Using HTML and CSS to create interactive icons that change color when clicked, similar to how a link behaves

Have you ever wondered if there's a way to make an icon act like a link when clicked, just like regular text links turning purple? And not just the last one clicked, but every single icon that gets clicked. Trying to use the :visited pseudo was unsuccessful in achieving this effect.

.visit {
  fill: lightblue;
}

.visit:visited {
  fill: green;
}
<a href="#"><svg>
   <rect width='300' height='100' class='visit'></rect>
</svg></a>

If you have solutions using jQuery and JavaScript, feel free to share, but if there's a way to achieve this effect with just HTML and CSS, that would be ideal.

javascripthtmljquerycssvisited

Answer №1

:visited is a pseudo-class that affects links and must be used with the <a> tag.

.visited-link {
  color: blue;
}

a:visited .visited-link { /* Update this section */
  color: purple;
}
<a href="#"><div>
   <p class='visited-link'>This is a visited link</p>
</div></a>

Answer №2

If I am understanding your question correctly, you can achieve the desired effect using the active pseudo-class. This will change the color to green when the link is clicked.

For more detailed information on how to use the active pseudo-class, you can refer to this website

a {
  padding: 10px;
}
  
.visit {
  fill: lightblue;
}

.visit:active {
  fill: green;
}
<a href="#"><svg>
   <rect width='300' height='100' class='visit'></rect>
</svg></a><a href="#"><svg>
   <rect width='300' height='100' class='visit'></rect>
</svg></a><a href="#"><svg>
   <rect width='300' height='100' class='visit'></rect>
</svg></a><a href="#"><svg>
   <rect width='300' height='100' class='visit'></rect>
</svg></a><a href="#"><svg>
   <rect width='300' height='100' class='visit'></rect>
</svg></a>

Answer №3

Make sure to change the number after the hashtag for each element you want this effect on.

.highlight {
  background-color: yellow;
}

a:hover .highlight {
  background-color: orange;
}
<a href="#2"><div>
   <p class='highlight'>Hover over me</p>
</div></a>

Answer №4

Check out this functional demonstration!

.container {
  width:  400px;
  height: 400px;
}

.container * {
  width: 100%;
  height: 100%;
}

.container .link {
  fill: #555;
}

.container:link .link {
  fill: #222;
}

.container:hover .link {
  fill: #9f3;
}

.container:active .link {
  fill: #3f9;
}

.container:visited .link {
  background: #f39;
}
<a href="#" class='container'>
  <svg>
    <rect class='link'>
    </rect>
  </svg>
</a>

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

Why doesn't the 'javascript' named directory have access to my localhost?

My Ubuntu 16.04 system is running Apache 2.4.18. Recently, I created a directory called "javascript" within /var/www/html and added an HTML file to it. However, when attempting to access the file via localhost/javascript/, I received the following error me ...

javascriptdirectorylocalhost

Replace the existing echo statement by refreshing it instead of simply adding a new one

I have developed an input feature that allows users to update their information. The entered data is displayed immediately after the input field, thanks to AJAX integration. I have managed to make everything functional, but I am encountering an issue where ...

phpjqueryajaxforms

Creating visually stunning full-width sections with graphic backgrounds using Bootstrap

Trying to bring a unique design concept to life, courtesy of my talented graphic designer. However, this sleek look is proving to be quite the challenge as I navigate through bootstrap implementation. We are focusing on a call to action section that perfe ...

htmlcsstwitter-bootstrap

Tips for converting PSD template into HTML/CSS code

Currently, I am in the process of converting a PSD template into HTML/CSS. The file contains around 50 layers that have been exported to PNG using a Photoshop script. To begin, I structured the code like this: <div id="container_1"> <div id="co ...

htmlcsstemplatespsd

Planes in Three.js that are overflowing may have their opacity adjusted

My current challenge involves aligning two planes in the same (or closest possible) position. When two planes made of different materials and colors occupy the same space, depending on the camera angle and view perspective, the front plane's opacity ...

javascript3dthree.jswebglmesh

Having trouble setting up a successful connection with Socket.io client?

I'm struggling to integrate websockets into my website. Every attempt I make in the client results in errors. This is how I have Apache configured: <VirtualHost *:80> ServerName xxxxx.com DocumentRoot /var/www/html/RoW ErrorLog /var/www/html/Ro ...

javascriptnode.jssocketssocket.io

What steps should I take to design a mobile-friendly navigation bar?

I have shared the code for my navigation bar in a previous post Fixing Nav Bar to top of page. Now, I want to create a mobile version of it, but I am new to designing for mobile devices. Based on feedback and some CSS tweaking, I have managed to make it wo ...

htmlcss

Error message displayed: "Unexpected token 'H' when attempting to render Markdown

I've been working with the react markdown library and wanted to share my code: import Markdown from 'react-markdown'; import PreClass from './PreClass'; type MarkdownFormatTextProps = { markdown: string; tagName?: string; ...

javascriptreactjsnext.jsmarkdown

Is there a way for me to activate onMouseEnter on elements that are positioned behind other elements

I'm attempting to activate the mouseEnter event when the mouse is over multiple elements simultaneously. The goal is for both mouseEnter events to be triggered when the mouse reaches the center, and ideally for both elements to change to a yellow col ...

javascripthtmleventsevent-handlingdom-events

APNS functionality is supported by APN providers, but it is not compatible with NodeJS in a production

I've set up a nodeJS script to send APNs. In development, it always works flawlessly. However, when I switch to production, the notifications never go through. Oddly enough, when I use the same notification ID with my production certificate in Easy Ap ...

javascriptiosnode.jsapple-push-notifications

Personalize the start and end dates of Fullcalendar

While working with fullcalendar, I have a unique requirement. I want my days to start at 5:00 and end at 5:00 the next day. Is it feasible to achieve this customization? ...

javascriptfullcalendar

sticky bootstrap datepicker anchored to the top of the screen

Currently, I am working on a form that includes a date picker using the bootstrap datepicker In this setup, I have hidden the main bootstrap field and added three custom fields. When any of these fields are clicked, the calendar should open next to them. ...

javascripthtmljquerycss

Executing Leaflet on the Node.js backend server

I have been attempting to run Leaflet on a Node.js server without success. I followed the instructions in the download section and used Jake to build it, but when I try to require Leaflet in a server file and start my node server, it crashes with the error ...

javascriptnode.jsleaflet

Where can I find the previous version of three.js? What is causing the incompatibility between the old and new versions of

Why is my app facing issues with the updated version of three.js? Can I find the previous version of three.js and why isn't the new version compatible? ...

javascriptthree.js

The mobile menu toggle functionality is malfunctioning on actual mobile devices, however, it is operational when tested on various mobile sim

Recently, I noticed that on , the menu collapses into a hamburger icon for mobile. However, when tapping on it on my phone and other devices, nothing happens. Surprisingly, it works perfectly fine when clicking on it in mobile simulators within Google Chro ...

csswordpressmobilemenuhamburger-menu

Variables are losing their way in the vast expanse of self-submitting

I have a form that needs to be submitted on the same page (index.php) and I want to capture the entered information as a JavaScript variable. <?php $loginid = $_POST[username] . $_POST[password]; ?> Here is some basic code: <script> var pass ...

javascriptphphtmlforms

Buttons aligned vertically alongside an input text field

I am trying to align two buttons vertically under an input text box with the middle aligned. This is what I have done so far: jQuery(document).ready(function($) { // Implementing bootstrap minus and plus plugin // Reference: http://jsfiddle.net/lael ...

javascriptjqueryhtmlcss

Top method for keeping track of most recent function outcome

Over time, I have become accustomed to utilizing the bind method to store the previous result of a function and keep track of it for future use. This allows me to easily concatenate or join the previous string with a new string without needing external var ...

javascriptbind

Problems with implementing JavaScript code in a WebView

I am currently working on an android WebView project where I have managed to change the background color to orange with this code snippet. @Override public void onPageFinished(WebView view, String url) { wv.loadUrl("jav ...

javajavascriptandroidwebview

Footer overlapping occurs on a single page

My webpage is having an issue where the footer is overlapping. It seems to be fine on all other pages except for this one. I would prefer not to make any changes to the footer since it's working correctly on other pages. Is there a way to adjust the C ...

phphtmlcss