Ways to ensure CSS affects icon inside main element?

Struggling to match the background color of Material-UI icons with the rest of the list items on hover. The CSS is not applying to both the icon and text despite styling the overall class (className= "dd-content-item"). Any assistance would be greatly appreciated!

CSS:

/*Styling for each list element in the dropdown-content*/
.dd-content-item {
    color: #1D3557;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    list-style-type: none;
    cursor: pointer;
    justify-content: center;
    background-color: none;
}

/*Dark color on hover for list elements in dropdown menu*/
.delete-icon, .archive-icon{
    position: relative;
    top: 6px;
}

.favorite-icon, .tag-icon  {
    position: relative;
    top: 7px;
}

.dd-content-item:hover {
    background-color: #D3EDEE;
}

/*Dropdown-content displayed as block on hover*/
.dd-wrapper:hover .dd-content {
    display: block;
}

Code showing hierarchy in html Image of hover action

javascriptcssreactjsmaterial-ui

Answer №1

Are you using images or SVG icons? It's possible that your image doesn't have a transparent background.

If not, you can try something like this:

.dd-content-item:hover,
.dd-content-item:hover .delete-icon,
.dd-content-item:hover .archive-icon,
.dd-content-item:hover .favorite-icon,
.dd-content-item:hover .tag-icon {
    background-color: #D3EDEE;
}

It's difficult to determine without seeing the images themselves or knowing what type of objects they are.

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

Updating nested interface values using React hooks

I am looking to develop an application that can seamlessly update a nested configuration file after it has been imported (similar to swagger). To achieve this, I first created a JSON configuration file and then generated corresponding interfaces using the ...

reactjsjsontypescriptreact-hooksreact-typescript

Nested min-height in HTML is crucial for ensuring that parent

HTML: <div id="a"> <div id="b> </div> </div> CSS: html, body { height: 100%; background: red; margin: 0; } #a { min-height: 100%; background: green; } #b { min-height: 100%; background: y ...

htmlcss

The left-floating elements are only partially functional

I recently encountered an issue with my HTML page that features a basic image gallery enhanced by lightboxes (fancybox). The images are meant to align left, with the first row containing three images and the second row containing two. <div class="image ...

htmlcsscss-float

What is the best way to ensure that a piece of content remains stationary while the neighboring content shifts in position?

Hello there! I'm currently working on my very first HTML and CSS project, and one of the tasks involves aligning 4 icons side by side horizontally. The goal is to have the icons "grow" a bit when the mouse hovers over them. However, I've encounte ...

htmlcsscss-positionmargins

`Struggling with managing callbacks, handling errors, and working with MongoDB`

I recently revamped my code for an application that handles adding companies to a database. In the past, my code was messy and unorganized, so I decided to structure it properly by introducing routes, a controller, and a data access object. Here is how my ...

javascriptnode.jsmongodbexpress

Can you provide a tutorial on creating a unique animation using jQuery and intervals to adjust background position?

I am attempting to create a simple animation by shifting the background position (frames) of the image which serves as the background for my div. Utilizing Jquery, I aim to animate this effect. The background image consists of 6 frames, with the first fr ...

javascriptjquerycsssetinterval

The magical form component in React using TypeScript with the powerful react-final-form

My goal is to develop a 3-step form using react-final-form with TypeScript in React.js. I found inspiration from codesandbox, but I am encountering an issue with the const static Page. I am struggling to convert it to TypeScript and honestly, I don't ...

javascriptreactjstypescriptreact-final-form

"Enhancing the aesthetics: Stylish blue borders around Bootstrap

After successfully setting up bootstrap-select, I have noticed that blue borders are showing in two specific instances: 1) within the dropdown menu 2) when a new value is selected I have made some adjustments but the issue persists. Can someone please p ...

csstwitter-bootstrapbootstrap-select

What is the best method for automatically filling in the grid-cols-x property in tailwindcss grids

Currently, I am in the process of developing a page using NextJs and TailwindCss. In this project, users have the ability to upload an image from their local device and specify the number of pieces they would like the image to be split into horizontally an ...

reactjsnext.jstailwind-cssnextjs-image

The MUI Select component allows for showing a different value than the one that is actually selected

Within my MUI Select component, I have a list of menu items that each display an icon and text. When a menu item is selected, the value displayed in the Select component includes both the icon and text. I am wondering if it is possible to only show the t ...

reactjsmaterial-ui

Guide to incorporating WebElement scrolling in Selenium using Java?

I need to implement a scroll function for a table on my webpage rather than scrolling the entire page, so using window.scrollBy is not an option. After attempting to find the container responsible for the scroll functionality in the DOM (with no luck), I ...

javascriptjavaseleniumscroll

Leverage Selenium WebDriver to validate a JavaScript variable through an assertion

During my Selenium WebDriver testing of a webpage, I encountered a situation where I needed to make an assertion on a JavaScript file but was uncertain about the process. The specific assertion I wanted to make was regarding the length of the servers arra ...

javascriptjavaselenium

I encountered an Angular error that is preventing me from updating and uploading images to my Firebase Storage because it is unable to locate the storage bucket

Hey there fellow developers! I'm currently working on a simple Angular app that allows users to upload images to a gallery. However, I've encountered an issue while trying to upload the images to Firebase Storage. I keep getting an error mentioni ...

javascriptangularfirebasegoogle-cloud-firestore

The menu is about to receive some custom styling

I have come across a webpage where I need to make some modifications, but I am unable to locate the script responsible for applying the inline style. This issue only seems to be occurring on the mobile version with the dropdown menu. <div class="is-dri ...

javascriptjquerycssmenu

Using Javascript to group elements by JSON data

I have an array of JSON objects and I'm attempting to organize it by a specific element. I came across some code example on grouping JSON format from this link const groupBy = prop => data => { return data.reduce((dict, item) => { ...

javascript

MapboxGL showcases user location with poor accuracy

I am currently developing a Progressive Web App (PWA) that involves users navigating through a map and collecting rewards by visiting specific store locations. To implement the map functionality, I have been utilizing a React wrapper for Mapbox, which has ...

reactjsgeolocationmapbox

What is the process for retrieving User Information using AngularJS following NodeJS authentication?

While I've come across similar questions on this topic, my lack of experience with Angular and Node is making it difficult for me to find a suitable solution. I had previously written this code that successfully handled the login process and allowed ...

javascriptangularjsnode.jspassport.js

Organizing a series of objects into groups of four for processing

I have a task of organizing an array of objects that represent game players by assigning each player to a group number based on their current group value. The challenge is to ensure that each group has as close to four players as possible, while also acco ...

javascript

Creating basic animations using React and GSAP

I’ve been grappling with this issue for days and struggling to comprehend the various sources of documentation and examples available. I'm really hoping someone can assist me with a specific example that I’m currently working on, which might help ...

reactjsreact-hooksgsap

Challenge with timing in slideUp and slideDown animations (jQuery)

The element with the class "heady" is designed to slide up when the document height percentage is below 25%. If you scroll back up, it should reappear after a delay of 1400ms. The problem arises when this action needs to repeat, as the class does not sli ...

javascriptjquerydelayslidedownslideup