CSS hover effect: altering background colors of both parent and child elements simultaneously

HTML:

<div class="container">
  <div class="parent">one
    <div class="child">two</div>
  </div>
</div>

CSS:

.parent {
  background: red;
  height: 200px;
  width: 200px;
}
.child {
  background: green;
  height: 100px;
  width: 100px;
  margin-top: 50px;
  margin-left: 50px;
}
/* Instead of applying individual styles */
/* .parent:hover {
     background: blue;
} 
  .child:hover {
    background: black;
  } 
*/

I am trying to change the background colours of both the parent and child elements when hovering over the parent. The issue is that both parent and child have the same property (background) but need different background colours. How can I achieve this simultaneously?

Answer №1

To modify the color of a child element when hovering over its parent, use the following CSS selector: .parent:hover .child

.parent {
  background: red;
  height: 200px;
  width: 200px;
}
.child {
  background: green;
  height: 100px;
  width: 100px;
  margin-top: 50px;
  margin-left: 50px;
}
/* Instead of applying styles individually */
.parent:hover {
  background: blue;
} 
.parent:hover .child {
  background: black;
} 
<div class="container">
  <div class="parent">one
    <div class="child">two</div>
  </div>
</div>

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

Display logo when website has been scrolled

On my website, I want to display a logo in the header only when the site has been scrolled. I attempted to accomplish this with JavaScript: if(document.getElementById("div").scrollTop != 0){ document.write("<img src='logo.jpg'>"); } How ...

Personalized designing of each letter

Is there a way to style numbers without using something like <span></span>? I'm looking for a clean way to do this for each sign. Attached is an example showing a "flip clock" effect that I would like to achieve. I have come across plugi ...

The website is showing up blank when accessed on mobile devices

One of the websites we recently worked on used to appear correctly on iPhone and Blackberry, but now it shows up as blank on both devices. Interestingly, the site still displays as usual on iPad even though we never created a specific mobile version for ...

Adding quotes is optional when using the append function

We are retrieving product options from the displayed html using variables PRODUCT_CUSTOM_1_ and PRODUCT_NAME_. Some products have quotations like " and '. However, when we post these strings elsewhere, they get cut off at the ". We need to either remo ...

Maintaining consistent row height in bootstrap when displaying or hiding a button

I'm currently working on a project utilizing AngularJS and Bootstrap to create a dynamic form. My goal is to have an 'edit' button display when a user hovers over a specific row of the form. However, I'm facing an issue where the row&ap ...

Locating elements with CSS Selector in Selenium - A complete guide

Currently, my code is set up to access a website and click on each row in the table which then opens a new window. My goal is to extract one specific piece of information from this new window, but I am struggling to utilize CSS selectors to retrieve the f ...

Tips on concealing all elements besides the one with the ID of "mainContainer"

Efforts have been made to conceal everything except the main content on this particular Facebook post The following CSS code has been attempted without success - I would appreciate any assistance. html body * { display:none; } #contentArea { display:b ...

What's the best way to use a single tag with a class to replace multiple nested blockquote tags

I have a collection of messy HTML files filled with repeated blockquote tags used to showcase lines of poetry. For example: <blockquote><blockquote>roses are red</blockquote></blockquote><br> <blockquote><b ...

Looking to show an image when a checkbox is ticked and hide it when it is unticked in HTML?

How do I make a specific image appear when a user clicks on a checkbox? I'm unsure if I should use jQuery, Ajax, or another method. What is the best approach for this task? Your assistance would be greatly appreciated. I have successfully created the ...

Ways to assign a default background shade to a webpage with a transparent background

My page has a completely transparent background achieved by using: body { background:none transparent!important; } When I display this page in a transparent iframe on another site, I can see the website's background through the page. However, if ...

Enhancing BarGraph and Bars Size in Oracle ADF

We have created a web application using Oracle ADF. The application includes a page with a graph displayed below. Currently, we are looking to enlarge the bar graph by increasing its height, width, and size of the bars themselves. Difficulty 1: While we ...

Ensuring Consistent Item Widths in a Loop using JavaScript or jQuery

In my code, I created a function that dynamically adjusts the width of elements in a loop to match the widest element among them. // Function: Match width var _so20170704_match_width = function( item ) { var max_item_width = 0; item.each(function ...

Learn how to toggle the display of a div using jQuery, just like the functionality on the popular website

Visit Mashable here Below is the script I am currently using: $(document).ready(function(){ $(".show_hide5").mouseover(function(){ $('.selected').removeClass('selected'); $(this).next().fadeIn("slow").addClass(&apo ...

Convert JavaScript objects into HTML format

Alright, I've got some JavaScript that's fetching data from a JSON file through a URL. Now, my goal is to convert each object (author_name, rating, author_url) into JavaScript IDs so that I can easily reference them in my HTML. For instance: &l ...

The background image of my bootstrap carousel is not responsive to changes in the browser window size

Hey there, I'm new to the world of programming and currently working on a project to create the front end of my personal website. I've opted to utilize a bootstrap carousel background image slider in my index.html file. However, I've noticed ...

What steps should I follow to track an event using Firebug?

When I examine the element, how can I discover all of the events that are attached to it? ...

Tips for ensuring consistent sizing of card items using flexbox CSS

I'm attempting to create a list with consistent item sizes, regardless of the content inside each card. I have experimented with the following CSS: .GridContainer { display: flex; flex-wrap: wrap; justify-content: space-around; align-item ...

Instructions on integrating iframe into Slides on material-auto-rotating-carousel

Looking to swap out the carousel slide image with a loom video. Any ideas on how to replace the media img with an iframe in material-auto-rotating-carousel? const AutoRotatingCarouselModal = ({ handleOpen, setHandleOpen, isMobile }) => { return ( ...

Combine two separate variables and insert them into a single cURL command line

I need to incorporate a random value from a variable into a cURL command. Additionally, I want the cURL command to execute a function using this random value. At the end of the function, I want to add a different value to the first one for completion and t ...

Improve navigation by integrating jQuery validation to resolve input errors seamlessly

I have been working with the jQuery validation plugin and Bootstrap. I recently added a fixed navigation bar at the top of the page using Bootstrap CSS. However, I encountered an issue where the fixed navigation was overlapping with the error message for i ...