Is it possible for a nested div to override the hover effect of its parent?

Is it possible for a nested div to override the hover effects of its parent? Here's an example:

.Box {
  width: 50px;
  height: 50px;
  background: red;
}

.Circle {
  width: 20px;
  height: 20px;
  background: blue;
  border-radius: 20px;
}

.Box:hover {
  animation: expand .5s normal forwards;
}

@keyframes expand {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.6);
  }
}
<div class="Box">
  <div class="Circle"></div>
</div>

In this scenario, is there a way to only make the Box expand and not the Circle?

htmlcss

Answer №1

Essentially, the parent hover event does not directly affect the child element.

However, in this particular situation, the child element is impacted because the parent element is being scaled. This leads to a cascading effect where everything within the parent element is also scaled.

To counteract this scaling effect on the nested div, you can implement a reverse scaling animation when the parent div is hovered over.

.Box{
   width: 50px;
   height: 50px;
   background: red;
}

.Circle{
   width: 20px;
   height: 20px;
   background: blue;
   border-radius: 20px;
}

.Box:hover{ 
    animation: expand .5s normal forwards;
}

.Box:hover .Circle {
    animation: contract .5s normal forwards;
}

@keyframes expand {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.6);
    }
}

@keyframes contract {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.625);  /* 1 / 1.6 */
    }
}
<div class="Box">
    <div class="Circle"></div>
</div>

Answer №2

When scaling the parent element, all of its contents will be affected. A workaround is to have a separate sibling element for the circle and apply the animation to that instead.

Styling (CSS):

  .Box {
    width: 50px;
    height: 50px;
    background: red;
  }

  .Circle {
    width: 20px;
    height: 20px;
    background: blue;
    border-radius: 20px;
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .Container {
    position: relative;
  }

  .Box:hover {
    animation: expand .5s normal forwards;
  }

  @keyframes expand {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.6);
    }
  }

HTML:

<div class="Container">
  <div class="Box">

  </div>
  <div class="Circle"></div>
</div>

Check out the demo here.

In this setup, the circle's position remains independent of the box due to its separate sibling structure.

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

Increasing the size of a div container based on the position of the cursor on the

I recently stumbled upon a fantastic website where two images slide left and right based on mouse movement. When the cursor is on the right, the right part of the image expands, and when it's on the left, the left part expands. You can check out the ...

javascriptjqueryhtmlcss

An illustration of the fundamental concepts of require.js

main.md <markdown> <head> <script data-main="script" src="http://requirejs.org/docs/release/2.1.8/minified/require.js"></script> </head> <body></body> </markdown> script.css defi ...

javascripthtmlrequirejs

Encountering npm issues while attempting to publish website on GitHub

Encountering errors in the terminal while attempting to deploy a website on Github using npm I am at a loss for what steps to take next PS C:\Users\user\modern_portfolio> npm run deploy > <a href="/cdn-cgi/l/email-protection" cl ...

htmlnode.jsgithubnpmgithub-pages

What is the best way to position the list element to align with the top of a div container?

To see a live example, visit this link. My goal is to create a line that separates two li elements within a nested ul. However, the line ends up taking the width of the container ul instead of the div containing the entire structure. In the provided examp ...

javascripthtmlangularjscss

How can you specifically target the initial row of a CSS grid using Tailwind?

Currently in my vue application, I have a loop set up like this: <div class="grid grid-cols-3 gap-14"> <article-card v-for="(article, index) in articles" :key="index" :content="article" /> </div> ...

cssvue.jstailwind-css

Expanding Two HTML Elements to Fill the Screen Width Using HTML/CSS

This is the current setup: The screenshot spans the width of my screen. The image is aligned to the left side, while the Level information section remains fixed to the right of the image. This layout meets my requirements. However, I would like the border ...

htmlcss

How can I position the arrows inside the Slick Slider instead of outside?

After discovering how user-friendly slick slider is, I decided to incorporate it into a website I have been developing: You can find the slider positioned at the bottom of the page. However, I am facing an issue where I would like the navigation arrows to ...

jqueryhtmlslider

What is the reason for preserving the height to width ratio in the <img> tag?

When I write a simple code like this: <img src="mycat.jpg" height="300px";> I noticed that if the image is very large, the height will be reduced to 300px, and the width will automatically adjust to fit the new height. I expected ...

htmlcss

Guide on implementing gradient animation effects in a React component

How can I implement gradient animation effects like this example in a React component using inline CSS? I need to utilize the CSS-based gradient animation effects shown below directly within the React component. Are there any specific packages available ...

cssreactjs

The positioning in CSS is not functioning as expected in a customized component

https://codesandbox.io/s/71j1omvz66 Struggling to shift the chat component to a new position. Any ideas on how to make it move? ...

cssreactjs

Sending values to URL using the <a> tag in HTML

I currently have the selected language stored in a variable (var lan= urlParam('language')). I am trying to pass this language as a parameter (without PHP) in a URL within an "a" tag, like so: <a href="http://hotelscombined.sitewish.gr/HotelN ...

javascripthtml

The JQuery loading symbol does not prevent keyboard interactions

I successfully implemented a Jquery busy indicator in my application using the following link: However, I noticed that even though it prevents users from clicking on input elements while loading, I can still navigate to these elements by pressing the tab ...

javascriptjqueryhtmlcssangularjs

Modify certain user configurations without altering all settings in one specific form using PHP and MySQL

I am in the process of developing a PHP website with data stored in a MySQL database. Currently, I have completed the sign-up, login, and logout functionalities. However, I am looking to enhance user experience by adding a section where users can adjust th ...

phpmysqlhtmlajaxforms

Understanding how to access and interpret comments within the HTML DOM body using Selenium操作

I am attempting to extract the following comment from the body of an HTML DOM using Selenium: <html> <head class=.....> <body> <script>...</script> <!-- Campaign Name: POC_SITE_MONETIZATION_DEALS_QA Experience Name: SMBelo ...

javahtmlselenium

The performance of the animation on http://responsive-nav.com/ becomes erratic when viewed on Android devices

Recently, I came across a fantastic plugin that works perfectly on regular computer browsers. However, when I tested it on my android phone, the css3 animation for the dropdown appeared choppy and seemed to be dropping frames. Does anyone have suggestions ...

javascriptcssplugins

Utilize JavaScript to redirect based on URL parameters with the presence of the "@ symbol"

I need help redirecting to a new page upon button click using a JS function. The URL needs to include an email address parameter. <form> <input type="email" id="mail" placeholder="ENTER YOUR EMAIL ADDRESS" requir ...

javascripthtml

Customizing the css for a certain category

On my homepage, I display categories with unique labels and icons. Each category is assigned a specific color for its label/icon. Typically, setting unique colors in HTML is straightforward: <!-- ngRepeat: category in categories | orderBy:'displ ...

htmlcsscategories

CSS for Page Header with Scroll-Over Content

Having trouble creating a "collapsing header" design where the page content scrolls over the banner image. I've tried adjusting z-index and positioning properties in CSS, but can't achieve the desired effect. Any help or guidance would be greatly ...

csssquarespace

Numerous asynchronous AJAX requests accompanied by various loading indicators

My ASP.net MVC page is utilizing ajax calls to load data for each of the six divs. To handle the loading indicator, I have created two methods as shown below. $("#divId").loading(); $("#divId").stopLoading(); Here is an example of one of my ajax calls ( ...

javascriptjqueryhtmlajax

Inserting a vertical barrier in the midst of the content

I am struggling to create a vertical divider and align the text properly in the top right corner of my screen. https://i.sstatic.net/UqURE.png Currently, I am facing issues with displaying the divider and positioning the text correctly. <div class="r ...

htmlcssbootstrap-4