Is there a way to permanently change the background color of a div tag after it has been clicked? I tried the code below:
div {
min-height: 50px;
background-color: yellow;
border-radius: 4px 4px 0 0;
padding: 10px;
display: flex;
align-items: center;
&:active {
background-color: red;
}
}
However, the background color reverts to the original one once the click is released. Is there a solution using only SCSS and html?
<div class="div">
<p>Hello</p>
</div>To achieve a pure CSS/SCSS solution, you can utilize the transition delay property. Begin by setting the transition to 0s and applying a delay of a significantly high value, such as 100000s. When activating the element, adjust the transition to 0s without delay to instantaneously change its color. Due to the extended delay, the color change will appear almost permanent (though it will revert back to the initial state once the predetermined delay time has elapsed).
div {
min-height: 50px;
background-color: yellow;
border-radius: 4px 4px 0 0;
padding: 10px;
display: flex;
align-items: center;
transition: background-color 0s 100000s;
&:active {
background-color: red;
transition: background-color 0s;
}
}
div {
min-height: 50px;
background-color: yellow;
border-radius: 4px 4px 0 0;
padding: 10px;
display: flex;
align-items: center;
transition: background-color 0s 100000s;
}
div:active {
background-color: red;
transition: background-color 0s;
}<div></div>Web Design
<div class="container" id="mainContainer">
<p>Welcome to our website!</p>
</div>
CSS
.container {
min-height: 100px;
background-color: lightblue;
border-radius: 8px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
JavaScript
let mainContainer = document.getElementById("mainContainer");
mainContainer.addEventListener('mouseenter',()=>{
mainContainer.style.background='green';
})
Recently, while managing my online shop using the opencart cms, I decided to enhance the search functionality by adding filters to my products. I followed a tutorial that guided me through the process: link to tutorial After implementing two filters for s ...
To see a demonstration of my question, please check out this fiddle. In short, I am seeking a solution for making the purple border extend to the height of the green border, overlapping it. I am open to any creative solutions and hacks. Specifically, wit ...
Currently, I am working on implementing a star rating system in Nuxt.js using fontawesome icons. However, I have encountered an issue where there is a strange whitespace separating two different stars when they are placed next to each other. For instance, ...
Is there a way to adjust the height of the text area based on the content entered by the user? I want it to automatically increase as the user types and decrease if they delete content. ...
Just by reading the title, you can understand my concern. Currently, when I click on "Example 4", the page abruptly scrolls to the h1 of Example 4. It looks so ungraceful, like a sudden boom. I would prefer a smooth scrolling effect. Is it possible to achi ...
UPDATE: Issue resolved, thanks for the help. It is working fine now: http://jsfiddle.net/c3AeN/1/ by Sudharsan I have multiple links on my webpage, all in a similar format like this: note: When I say 'similar format', I mean that all links share ...
Looking to invoke the WCF service through JavaScript, utilizing AJAX? Check out this resource: Calling WCF Services using jQuery Here's my query: Is there a method to retain some JavaScript-related data after making a request, and then transmit inf ...
I am facing an issue with two columns on my website - the left column has a background image while the right one contains text. The right column also has a button that reveals more text when clicked. However, after clicking the button, the image in the lef ...
My Magento store seems to be loading an excessive amount of CSS files: https://i.sstatic.net/geBtq.jpg I am looking to streamline this by combining all these files into just 1 or 2 CSS files. While I am aware of the merge option in Magento, it unfortunate ...
I am currently working on a div where I need to increase the width based on checkboxes that are selected. The goal is to add to the width as more checkboxes get checked. Here is an example of the HTML code I'm working with (please excuse any syntax e ...
I have a HTML and JS script that is designed to load images from PHP using AJAX and then place them into a div. Afterwards, a JavaScript function will paginate the images. Everything works perfectly fine when I hardcode the images manually. However, when I ...
I've implemented this code in my services.js file: angular.module('appServices', ['ngResource']). factory('User',function ($resource) { return $resource('http://localhost\\:3001/api/user/:id', { ...
Looking for a solution to align vertically in a basic navigation list bar, particularly when some items have two lines of text. I want the text to be vertically aligned to the middle, while still maintaining the ability to hover and click within the list ...
Is there a way to use an icon in jQuery Mobile on a span element and also support retina display without giving the span a fixed width? Should I attempt to utilize Media Queries to achieve this, or is there an "official way" to do it? Thanks, Nils ...
I am looking to implement a drag and drop function where I can move elements from one div to another, each containing different images. However, I want the image displayed in the second div to change based on the element being dragged. For example: When d ...
Currently working on a website design and looking to replicate the unique color gradient effect seen in the top navigation bar of Virgin America airlines' website (refer to the image linked below). Interested in any CSS/HTML techniques that could help ...
Does anyone know how to align Bootstrap cards and make them responsive? I have them centered, but they are overlapping and sticking to the left side. This is for email development with a maximum width of 680px. Any assistance would be greatly appreciated! ...
Currently, I am encountering a problem with using iframes to manage the navigation aspects on my website. Despite setting the iframe to have "overflow: visible;", it still crops the bottom of my content. The strange thing is, both iframes on the same page ...
I am facing a challenge with my HTML popup window where I need to add text after opening the window using a specific function: var win = window.open('private.php', data.sender_id , 'width=300,height=400'); win.win ...
I am looking to change the color of my navbar upon scrolling. When the navbar is at the top, the background should be transparent. Thank you to everyone for the attention and I apologize for my poor English! /* Navbar Color */ .navbar-default .navbar-t ...