Change the color of the Parent Menu when a childMenu is clicked on using CSS and HTML

<li class="btn-group" mdbDropdown>

  <a mdbDropdownToggle id="ParentId">
    <i class="nav-item"></i> MainMenu <i class="fa fa-angle-down"></i>
  </a>

  <div class="dropdown-menu">
      <a id="chaildId1" routerLinkActive="class-nav_mi" routerLinkActiveOptions="{exact:true}" [routerLink]="['/logs']">Menu-1</a>
      <a id="chaildId2" routerLinkActive="class-nav_mi" routerLinkActiveOptions="{exact:true}" [routerLink]="['/reports']">Menu-2</a>
  </div>

</li>

Upon clicking a child menu item, the color of the parent menu will change to match the child menu color. This will apply the child menu color to the parent menu after the child menu is clicked.

Answer №1

Utilize the cutting-edge brand new focus-within sudo class

To ensure uniformity, it is recommended to also implement :hover

.btn-group:focus-within > a > .nav-item,.btn-group:hover a .nav-item {

/*apply hovering/focus colors*/
}

To achieve onclick colors, JavaScript will be required

Update: The change from a tag to Angular was made, but I'm not familiar with that

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

Setting an action when clicking on a slice of a Doughnut chart using Chart.js

I have been working on integrating chart.js into my Django Project, and so far it has been going smoothly. I successfully created a doughnut chart with two slices. Now, I am trying to implement separate actions for each slice when clicked, such as redirect ...

CSS Transition not activating upon initial mouseover

My attempt at a simple transition is not working properly on Safari. I am trying to change background images from A to B on hover, but the transition is not smooth when I first hover over the element. Instead of gradually fading in/out, it instantly change ...

Changing the color of a tooltip for a specific element using Bootstrap 4

Is there a way to customize the tooltip background-color for icons with the classes "alert-danger" to red and "alert-success" to green using the following CSS commands: .alert-danger + .tooltip > .tooltip-inner { background-color: red !important; } ...

Modifying the color of the highlighted selection in a dropdown select box

Is it possible to change the blue highlight on this dropdown to gray? Check out this demo of a select box I am aiming to alter the highlight color to gray, can someone help me achieve this? select { border: 0; color: #EEE; background: transparen ...

Troubleshooting a mapping problem with CSS elements

While building my website, I have successfully mapped the elements by ID for all alphabet letters except A. When clicking on the letter A, it does not go to the respective elements. Can anyone please help me find a solution? Visit this link for reference ...

Using jQuery to modify a CSS property when a specific option is chosen

I'm currently working on creating an option dropdown menu and I've hit a roadblock trying to display a textbox only when the 'other' option is selected. Here's what I have so far: <span id="con-country"><label for="count ...

Troubleshooting a unique CSS bug in jQuery mouseover functionality

Check out this pen: https://codepen.io/anon/pen/eKzEVX?editors=1111 I recently created a Form Select in Laravel: {!! Form::select('status_id', $statuses, $post->status_id, ['class' => 'form-control post-sub-items-label &apo ...

I am interested in designing a dynamic wave-themed background for a menu

I am looking to create a menu background that ripples like a wave when hovered over. Check out the first example here: https://i.sstatic.net/LoOWM.png I want to achieve the same effect. Can anyone help me with how I can do this? <ul> <li>likk ...

Auto play feature malfunctioning in Onsen-UI Carousel attribute settings

When utilizing onsen UI in my mobile web application, I encountered an issue with the autoplay property not functioning properly within the carousel. <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button on ...

There was a problem compiling bootstrap.scss due to an error found in _root.scss

I've encountered an issue while compiling my bootstrap sass file. The error message I'm receiving is shown below. Although I can make it work by commenting out lines 4 and 8 of _root.scss, that is not the optimal solution. Can someone please expl ...

The services generated by OpenAPI Generator typescript-angular are experiencing failures

While utilizing version 2.4.26 of this OpenApi generator ("@openapitools/openapi-generator-cli": "^2.4.26"), I am encountering issues with Angular services (Angular Version 13.2.0). For example, the services are passing too many arguments to the Angular Ht ...

What is the process for calculating and determining the exact area the div should be released?

I am currently developing a drag-and-drop application using only Javascript. I have successfully implemented the dragging functionality, allowing elements to be moved randomly within the page. However, I now face the challenge of creating a drop zone with ...

How to set up Angular 5 with Express

What is the best way to add Angular 5 to an existing Express project? Below are my files: https://i.stack.imgur.com/DPgMs.png Package.json: https://i.stack.imgur.com/iVVxA.png I am looking to integrate Angular 5 into this express project and develop t ...

Is the drag-and-drop feature not working properly?

I'm new to coding in Javascript and I'm attempting to insert an image inside a border created with CSS. Unfortunately, the script doesn't seem to be working properly. It's possible that there is a small error in the code causing the iss ...

ng-mocks: NG0304: The component 'ng-mocks-ButtonComponent' is not recognized

While running test cases with Angular and ng-mocks, I encountered the following error: Error: NG0304 - 'ng-mocks-ButtonComponent' is not recognized as a valid element within the template. To resolve this error for an Angular component, ensure ...

The sanitizer variable becomes null when accessed outside of the NgOnInit function in Angular using TypeScript

At first, I added DomSanitizer to the component: import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser'; Next, a class was created and included in the constructor: export class BlocklyComponent implements OnInit { primar ...

XMLWorker: unable to align cell vertically properly

Upon reviewing this code snippet: <table> <tr> <td border="1"> <table> <tr><td>Blah</td></tr> <tr><td>Blah</td></tr> ...

exploring the seamless transfer of values between Thymeleaf and Spring controllers, and vice versa

As a newcomer to thymeleaf, I'm seeking guidance on how values are passed between the thymeleaf HTML and Spring controllers. Could someone please recommend some helpful tutorials for thymeleaf-spring-mvc? In the following example, I would like to und ...

Having Difficulty Applying a Background Color to a Class in Bulk

I am working on a unique HTML canvas for pixel art, which is created using a table made up of various divs all sharing the "pixel" class. I want to add a clear button that can reset the entire canvas, but changing the background color of each individual di ...

What is causing my background div to jerk around when I implement jQuery animate to adjust its height?

UPDATE: I have replicated my issue in jsFiddle: http://jsfiddle.net/leongaban/3v8vW/3/ I am dealing with 2 tabs - one should reduce the height of the form-background when clicked, while the other should increase it. I want a smooth animation without any a ...