I'm looking to change the color of a specific div when it's clicked on among three different ones. The goal is to indicate which one is active without reverting back to the original color once the mouse is released, similar to a focus effect. I'm also utilizing bootstrap for this project.
Below is an example of the HTML structure:
<div>
Section 1
</div>
<div>
Section 2
</div>
<div>
Section 3
</div>
Is there a way to achieve this without relying on JavaScript?
To enhance the accessibility of your DIVs, consider making them focusable with the addition of the tabIndex attribute:
<div tabindex="1">
Section A
</div>
<div tabindex="2">
Section B
</div>
<div tabindex="3">
Section C
</div>
Once you have done this, you can easily utilize the :focus pseudo-class for styling purposes:
div:focus {
background-color: blue;
}
See a demonstration here: http://jsfiddle.net/xyz123ab/
Here is a helpful solution that has proven successful:
section:hover{
background-color: lightgrey;
}
:active is a clever technique that works well for both touchscreens on mobile devices and clicks on PCs. By using :active, you can detect touch events and utilize ::before to create a mask layer. Just remember to remove the pointer event from ::before, otherwise it will interfere with your click functionality on the div.
div{
position: relative;
}
div:active::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .4;
z-index: 5;
background: rgba($color: #000000, $alpha: 0.12);
}
div::before{
pointer-events: none;
}
div:hover {
background-color:'color';
}
In the control, there is an href link that triggers a javascript function and passes a variable to it: <a href="<%#XPath("link").ToString()%>" onclick="return getLink(this)">Link</a> I'm looking for a way to prevent the browser fro ...
Currently facing an unusual issue where scrolling on my mobile website becomes sticky, with intermittent responsiveness to touch. Struggling to identify the root cause as there are no console errors detected. Provided below is a snippet of code for a subse ...
In the world of html/javascript, the order of execution is typically serial, meaning that the browser reads the code line by line and interprets it accordingly. This is a common practice in most programming languages. Some javascript programmers prefer to ...
Currently, I am developing an android application specifically designed for tablet devices. This application will display a simple HTML page with text that will be shown for extended periods of time, sometimes up to several hours. The content on this page ...
It seems like a straightforward issue, but I'm having trouble finding a solution. I am utilizing Bootstrap5 for this project. You can find the complete code here : Due to some problems with Codeply, I have also uploaded it on jsfiddle. https://jsf ...
I have a unique widget named employee-widget stored in the Angular application folder as employee-widget.js. Despite following the calling method below, the widget fails to load. Method 1: <div> <h4>Attempting to load the employee widget& ...
At the moment, I am utilizing an HTML textarea attribute to collect input from users and then displaying that text back to them formatted. However, there seems to be an issue with how it handles tabs. For instance, when attempting to input the following: ...
Utilize the teachable.com platform and take advantage of their code Snippets feature (refer to attached photo #1) https://i.stack.imgur.com/dW1lB.png I inserted the following code: div { direction: rtl; } To modify the website's direction to be ...
I integrated a 3-second mini-loading animation on my website. It shows up every time I refresh the site or navigate to another page. The issue I'm facing is that once I add the loading section, it never stops (it should only last for 3 seconds). Usua ...
body { background-color: bisque; } <!DOCTYPE html> <html> <head> <title>Reading</title> </head> <body> <h1> <button><a href="index.html">Home</a></button> & ...
My objective is to extract the URLs linked with specific CSS elements on a website using rvest. Despite trying various methods, such as using the html_attr function with the 'href' argument, my current script only returns NA values instead of the ...
Exploring the possibility of creating a spin the wheel effect like this using only HTML and CSS, no Javascript involved Seeking references or examples to determine feasibility. ...
Initially, I kindly request you to read this until the end. I am in dire need of assistance with my problem as I have searched for solutions but still remain clueless. Referring to the image provided, the first 'Product & Total Product' element ...
After making an ajax call, I am receiving a total of 27 results that I need to divide equally into three sections, with 9 results in each. The sections are displayed below: HTML: <div id="content"> <section> </section> <s ...
Below is the code breakdown: (Step by step) Place counter.txt in APPPATH . 'logs/counter.txt' Set up counter_helper.php in APPPATH . 'helpers/counter_helper.php'; Autoload the newly created helper in APPPATH . 'config/autoload.p ...
Encountering an issue, I set out to enhance readability by adjusting letter-spacing to 1px. Displeased with the result, I attempted a half pixel spacing of 0.5px but found it ineffective. Subsequently, I experimented with em attributes but failed to accomp ...
I'm facing a minor issue that is robbing me of precious time. Currently, I am using the assetic plugin with the lesscss filter in my symfony2.1 project. The problem lies in Assetic not detecting changes in imported files when using the @import functi ...
After accidentally starting in quirks mode without declaring a doctype, I realized my mistake and corrected it by declaring a doctype. However, there is a persistent issue with a space between .car-box-img and car-box that I can't seem to locate in t ...
I attempted to implement the application cache feature on my website, but I am facing a major issue. I only want to cache three specific files: style.css, favicon.ico, and script.js. The problem arises when the browser also caches other files such as inde ...
In an attempt to create a dynamic website that features a random image on each page refresh, I have stored all images in a directory named "/pngs/" and set up a MySQL database with indexed rows for reference: <img src="pngs/000.png"> <img src="pn ...