Activate two divs simultaneously by hovering over one

I have two divs located in the footer of my website and they can be seen here: divs in question

Below is the code for these divs:

.upNextCard{
  /* Rectangle 68 */

  position: absolute;
  width: 214.29px;
  height: 255.69px;
  margin-left:300px;
  margin-top:139px;
  background-color:#E0B21C;
  transform: rotate(-12.08deg);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.5s;
  pointer-events: visible;

}

.upNextCard:hover {
  margin-top: 120px;
}

.upNextBanner{
  /* Rectangle 69 */
  position: absolute;
  width: 65.31px;
  height: 47.17px;
  background: #FE9C9C;
  transform: rotate(-12.45deg);
  margin-left: 400px;
  margin-top: 98px;
  pointer-events: visible;

}

Is there a way to activate both of them by hovering over the larger box?

javascripthtmlcsshtml5-canvashover

Answer №1

Absolutely, you can link them together to create a hover effect on the large box.

.largebox:hover .upcomingBanner{ Etc.... }

.largebox:hover .upcomingCard{ .... }

Answer №2

If you could share your HTML code, it would make it easier to understand the relationship between the divs.

Check out this resource for more information on CSS combinators: https://www.w3schools.com/css/css_combinators.asp

It might provide some assistance to you.

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

Looking to implement an underline effect using CSS for the active tab that mimics the hover effect already applied

How can I ensure that the underline on active tabs (Domov) matches the hover effect on other tabs? The border-bottom currently creates a border that is lower than the hover effect, resulting in inconsistent underlines as seen on this page - (try moving ...

htmlcss

including a code snippet within a dropdown menu or embedding it in a clickable button

Hey there, my name is Wouter Sanders and I am currently learning to code! I recently finished creating a RAL color picker for a project I'm working on. The only issue I've run into is trying to embed the code in a menu or button so that it doesn ...

javascriptjqueryhtmlcss

Tips on concealing a table upon opening an HTML page

Hello, I've implemented some JavaScript code that displays a table when hovering over a link and hides it when moving the mouse away. However, I'm facing an issue where I want the table to be hidden when the page first loads. Can anyone help me a ...

javascripthtml

Using HTML Dropdowns to Dynamically Generate Options for Lists

I am currently updating a web application that is built using C# with an HTML front-end. The form within the application has two drop-down selection menus. The first drop-down menu needs to call a C# function in order to populate its options with the retu ...

c#htmldrop-down-menu

Is it possible to shift an HTML background using jQuery's animate method?

My website has a unique background image through CSS, creating the look of a blueprint schematic with a white grid on a blue background. CSS: html { display: block; position: absolute; background: url(../assets/background.jpg) repeat; col ...

javascriptjqueryhtmlcssjquery-animate

The Node.js execSync functionality is not functioning as expected, as the changes made to the system are not taking effect

I'm looking to prevent chrome.exe from accessing the internet through the Windows firewall. The specific command I need to use is netsh advfirewall firewall add rule name="Block Chrome" dir=out action=block program="C:\Program Files (x86)\G ...

javascriptnode.jspowershell

Could this be considered a typical trend - opting to return data instead of a promise?

I recently came across a new approach while reading 'Mean Machine'. Typically, I have always been taught to return a promise from a service to the controller and then handle it using .success or .then. In this case, the author is directly retur ...

javascriptangularjsajaxpromiseangularjs-service

The Vue2 @click event does not function properly when using v-html within a different component

I currently have a sign up form that includes an Alert component for displaying any errors. One of the conditions may prompt a message saying "You already have an account, click here to log in". The error messages are passed as props to the "Alert" compon ...

javascripthtmlvue.jsvuejs2

Pressing a button to input a decimal in a calculator

I am encountering an issue with inputting decimals in my JavaScript. I have a function that checks if the output is Not a Number (NaN). If it is, I want it to output a decimal instead. I attempted to add another conditional statement like this: var opera ...

javascript

Creating Beautiful Tabs with React Material-UI's Styling Features

I've been delving into React for a few hours now, but I'm struggling to achieve the desired outcome. My goal is to make the underline color of the Tabs white: https://i.stack.imgur.com/7m5nq.jpg And also eliminate the onClick ripple effect: ht ...

javascriptreactjsmaterial-ui

Converting a mongoDB response array from a JavaScript object to a JSON string: a step-by

After developing a custom javascript API to retrieve data from a MongoDB database, the issue arose where the data is being returned as an array of objects instead of a simple JSON string. The current statement used for retrieving the objects is: return db ...

javascriptjsonmongodbbson

Steps to troubleshoot a scrollbar problem while applying flexbox in CSS

I'm currently working with a front-end framework that utilizes a flex layout. In my development of an admin page, I have included sections for the sidebar, header, and main. My objective is to ensure that the sidebar and the header + main sections fun ...

htmlcssscrollflexbox

The grouping of values in JavaScript is known as an array

I need assistance in modifying my code to generate dynamic buttons based on array elements instead of objects. Currently, the array I am using contains objects which is causing issues with tracking button status and other computations. Can you help me adju ...

javascriptangularjs

jQuery may not function properly in a dynamic content environment

I'm encountering an issue with my web application. I've developed a chat feature using Ajax, and I want it to load when a button is clicked. The functionality works, but the dynamic data loaded doesn't seem to be compatible with jQuery. Aft ...

javascriptjqueryajax

Troubleshooting: Unable to mutate a state variable in Vuex

I am working on updating my contact list whenever a different brand is selected. The goal is to clear the array of contacts associated with the current brand and then refill it with the new brand's contacts. However, I'm facing an issue in my Vu ...

javascriptvue.jsvuex

Align text in a vertical manner within various containers

I'm encountering a puzzling issue with my side-by-side divs. I have different-size headers in each div, and I want the top header in each to be baseline aligned. Unfortunately, using vertical-align: baseline doesn't seem to work between the two d ...

htmlcss

Encountered a SyntaxError: Unexpected token "e" while attempting to parse a JSON string

When I attempt to use JSON.parse in order to convert the string below into a JavaScript object, I encounter an "Uncaught SyntaxError: Unexpected token e" error. { "__type": "HRIS.oHRData, HRIES, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null", ...

javascriptjson

What is the best way to achieve the effect of "overflow: hidden" in three.js or WebGL?

I'm diving into the world of designing a WebGL GUI for my games and I'm keen to explore GPU graphics in more depth, as it offers a smoother experience compared to WebKit CSS rendering. Is there a way to create a scrollview where the internal mes ...

javascriptnode.jsthree.jswebgl

The pop-up menu is obstructed by the dialog box

Within my dialog, there is a gridview that allows the user to input information. One of the textboxes within the grid has a button adjacent to it. Upon clicking this button, a menu appears with a selection of items for the user to choose from, and the sele ...

javascriptjqueryasp.net

Using Javascript, capture user input to execute a search function without the need for a submit button

I am attempting to retrieve input from a textbox and utilize that value to conduct a search without the need for a submit button. The goal is for the search results to be displayed on the page as soon as the content in the textbox changes. I have been br ...

javascripthtmlformstextboxuri