Shadows on menu buttons transform when clicked using React and CSS

I'm currently working on customizing the styling of a menu using CSS in a project that involves the use of "react-horizontal-scrolling-menu". While I've been successful in styling the menu items with .menu-item:hover & .menu-item:active, I am encountering issues with .menu-item:visited. No matter how many different approaches I try, I can't seem to figure out how to control the appearance of the menu item after it has been clicked. Below is a code snippet from the current module view:

https://codesandbox.io/s/qk1v5n0z5w?fontsize=14&moduleview=1

javascriptcssreactjsstylesmenuitem

Answer №1

Upon conducting my research, I discovered that the appearance of buttons changes when users click on them:

.menu-item:active {
  background: #fafafa;
  transition: all 0.1s ease-out;
  border: 9px solid #fafafa;
  box-shadow: 0 7px 30px #cc0f0fa6;
  color: #cc0f0f4d;
}

Interestingly, there is no CSS code for .menu-item:visited in this scenario. This is because your buttons are not actually links (they are <div> elements). Browsers have restrictions on the styles that can be applied to a:visited links due to security concerns.

The permitted styles include:

  • Color
  • Background-color
  • Border-color (and separate border colors for different sides)
  • Outline color
  • Column-rule color
  • The color attributes of fill and stroke

All other styles are inherited from a:link.

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

Error: The XML parsing in ASP failed to find a root element at the specified location

When clicking the button, I have jQuery/Ajax code that is supposed to pass the value of a selected radio button to a controller action and open a detail page. However, I am encountering an error. When using Mozilla Firefox, the console displays: XML Par ...

javascriptjqueryasp.netajaxasp.net-core

Tips for adding JSON values to an object

There is a specific object called SampleObject which has the following structure: { ID: "", Name: "", URL: "", prevName: "", Code: "", } I am looking to insert the values from the JSON object below (values only): var object = { "Sample ...

javascriptjson

The performance of CasperJS when used with AngularJS is subpar

If I click on just one button in Casper, everything works perfectly. The code below passes the test. casper.then(function() { this.click('#loginB'); this.fill('#loginEmailField', { 'loginEmail': '<a ...

javascriptangularjscasperjs

The AJAX Request has indicated that the entity provided is not in an accurate 'application/json' format. It seems to be missing or empty, leading to an error with a code of '400'

While attempting to create an AJAX request to submit users to an external API, I faced a problem that is hindering my progress. Since I'm more familiar with PHP than JS, I saw this as an opportunity to expand my knowledge in JavaScript. The approach ...

javascriptajaxpost

The property y is not found on type x during property deconstruction

After creating a straightforward projectname.tsx file to contain my interfaces/types, I encountered an issue: export interface Movie { id: number; title: string; posterPath: string; } In another component, I aimed to utilize the Movie interface to s ...

reactjstypescript

Crashes within an HTML5 Canvas

Having recently started to explore Javascript and working with canvas elements, I've encountered a roadblock when trying to implement collision detection for the canvas walls. Typically, I have a small square drawn on the canvas that I can move aroun ...

javascripthtmlcanvascollision-detection

Urgent issue: a dependency request is an expression in Next.js

I am facing an issue with my multi-language site that uses i18next. Whenever I try to transition between pages, it takes too long and sometimes even refreshes the entire page. The console shows this warning: warn - ./node_modules/next-i18next/dist/common ...

reactjsnext.jsconfigurationi18next

Aligning an image vertically within a division

I am currently working on aligning images vertically within an image rotator (SlideDeck). At the moment, all the images are aligned at the top but I need them to be centered. The heights of the images vary. I have tried several methods, including absolute ...

csshtmlvertical-alignment

Guide to redirecting to another page with parameters in React

After successfully integrating Stripe with React and processing a payment, I am trying to redirect to another page. await stripe .confirmCardPayment(CLIENT_SECRET, { payment_method: { card: elements.getElement(CardElement), ...

javascriptreactjsstripe-payments

Global variables in AngularJS that are asynchronous

My challenge lies in using AngularJS to create several global objects accessible by any controller within the application. One crucial object I require is a user object containing the user's ID and other essential properties retrieved from the databa ...

javascriptajaxangularjsglobal

Is there a way to leverage the extensive Bootstrap 5 color palette within an Angular application?

Currently working on a project in Angular 12 with Bootstrap 5 and SCSS, I'm facing a challenge in utilizing the new extended Bootstrap 5 color palette such as indigo-300 or pink-200. I'm not sure if I need to import them in a certain way or how t ...

cssangularsasscolorsbootstrap-5

Arrangement using the display property of inline-block not following a linear direction

I'm experiencing some issues with the arrangement of elements on this page: When the viewport width is around 800px, the layout appears misaligned. Some lines have only a few bottles even though there is space for more. Is there a solution to this pr ...

htmlcss

Why does Popover in Material-UI hide the backdrop of the Modal?

It's puzzling why Popovers are set to have an invisible backdrop by default, with no apparent way to change it. Is there a key concept in Material Design that I'm overlooking? Should I raise this concern as an issue? <Modal container ...

reactjsmodal-dialogmaterial-uimaterial-designpopover

Is there a way to change the route in nextjs without causing a refresh?

As I navigate through routes such as: /welcome/article/article-slug-1 /welcome/article/article-slug-2 /welcome/article/article-slug-3 The dynamic element is the article-slug, which functions as a query parameter. The structure of my pages is as follows: ...

reactjsnext.js

Is there a way to adjust the height of a DIV based on the background image and keep the text centered at the same time?

Currently in the process of designing a landing page for my website, and I am interested in incorporating a Jumbotron to provide a more modern and tech-savvy touch. Successfully managed to center my text both horizontally and vertically, now looking into s ...

htmlcss

Restricting variable values in Node.js

As I work in an IDE, there is a feature that helps me with autocomplete when typing code. For example, if I type: x = 5 s = typeof(x) if (s === ) //Cursor selection after === (before i finished the statement) The IDE provides me with a list of possible ...

javascriptnode.jsvariables

Automated configuration of AWS Amplify JavaScript using Gitpod

Looking to streamline the setup process for an AWS Amplify JavaScript project on Gitpod. My goal is to eliminate the manual steps of configuring the amplify-cli, such as adding IAM users and generating the aws-exports.js file. Successfully installed the a ...

javascriptvue.jsaws-amplifygitpod

Change numbers into a comma-separated style containing two decimal points using javascript

I have been working on a JavaScript function to convert numbers into a comma-separated format with two decimal places: Here is my current code snippet: Number(parseFloat(n).toFixed(2)).toLocaleString('en'); The issue with this code is that it ...

javascriptnumber-formatting

Angular JS: Saving information with a promise

One dilemma I am facing is figuring out where to store data that needs to be accessed in the final callbacks for an http request. In jQuery, I could easily handle this by doing the following: var token = $.get('/some-url', {}, someCallback); tok ...

javascriptangularjs

The type 'HTMLElement' does not contain a property called 'src'

I'm having trouble displaying an image because of an error in the src property. How can I correct this declaration? import { Typography } from '@material-ui/core'; import styled from 'styled-components' const DisplayProduct = ({it ...

reactjsmaterial-uistyled-components