Is there a way to alter multiple classes using hover effect on a single class without the use of JavaScript, only employing

Hello there! I have a question about applying styles to specific classes when hovering over certain elements. Unfortunately, I am unable to make changes to the HTML files and can only work with the CSS file. Take a look at the image below for reference: https://i.stack.imgur.com/fq3pm.png https://i.stack.imgur.com/xvtZm.png https://i.stack.imgur.com/ufyv0.png

body {
  margin: 0;
}

#container {
  position: relative;
  background-color: #d5d8dc;
  margin-top: 100px;
  margin-left: 100px;
  width: 400px;
  height: 400px;
}

.right {
  background-color: #2ecc71;
  position: absolute;
  width: 320px;
  height: 40px;
}

.right:nth-child(1) {
  left: 20%;
}

.right:nth-child(2) {
  transform: rotate(90deg);
  right: -140px;
  top: 140px;
}

.right:nth-child(3) {
  left: 20%;
  bottom: 20%;
}

.right:nth-child(4) {
  transform: rotate(90deg);
  right: +140px;
  top: 140px;
  z-index: 2;
}

.left {
  background-color: #e74c3c;
  position: absolute;
  width: 320px;
  height: 40px;
}

.left:nth-child(5) {
  left: 0;
  top: 20%;
}

.left:nth-child(6) {
  transform: rotate(90deg);
  right: -60px;
  top: 220px;
}

.left:nth-child(7) {
  left: 0;
  bottom: 0;
}

.left:nth-child(8) {
  transform: rotate(90deg);
  left: -140px;
  top: 220px;
}

.left:hover {
  z-index: 3;
}

.right:hover {
  z-index: 3;
}
<div id="container">
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
</div>

htmlcsshover

Answer №1

To achieve this effect, you can target the container element like so:

#container:hover .right {
  background-color: yellow;
}


body {
  margin: 0;
}

#container {
  position: relative;
  background-color: #d5d8dc;
  margin-top: 100px;
  margin-left: 100px;
  width: 400px;
  height: 400px;
}

.right {
  background-color: #2ecc71;
  position: absolute;
  width: 320px;
  height: 40px;
}

.right:nth-child(1) {
  left: 20%;
}

.right:nth-child(2) {
  transform: rotate(90deg);
  right: -140px;
  top: 140px;
}

.right:nth-child(3) {
  left: 20%;
  bottom: 20%;
}

.right:nth-child(4) {
  transform: rotate(90deg);
  right: 140px;
  top: 140px;
  z-index: 2;
}

.left {
  background-color: #e74c3c;
  position: absolute;
  width: 320px;
  height: 40px;
}

.left:nth-child(5) {
  left: 0;
  top: 20%;
}

.left:nth-child(6) {
  transform: rotate(90deg);
  right: -60px;
  top: 220px;
}

.left:nth-child(7) {
  left: 0;
  bottom: 0;
}

.left:nth-child(8) {
  transform: rotate(90deg);
  left: -140px;
  top: 220px;
}

#container:hover .right {
  background-color: yellow;
}
<div id="container">
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
</div>

(Codepen)

If your focus is solely on hovering the ".right" divs, a CSS-only approach utilizing modern selectors like :has() would be needed, as shown below:

#container:has(.right:hover) .right {
  background-color: purple;
}


body {
  margin: 0;
}

#container {
  position: relative;
  background-color: #d5d8dc;
  margin-top: 100px;
  margin-left: 100px;
  width: 400px;
  height: 400px;
}

.right {
  background-color: #2ecc71;
  position: absolute;
  width: 320px;
  height: 40px;
}

.right:nth-child(1) {
  left: 20%;
}

.right:nth-child(2) {
  transform: rotate(90deg);
  right: -140px;
  top: 140px;
}

.right:nth-child(3) {
  left: 20%;
  bottom: 20%;
}

.right:nth-child(4) {
  transform: rotate(90deg);
  right: 140px;
  top: 140px;
  z-index: 2;
}

.left {
  background-color: #e74c3c;
  position: absolute;
  width: 320px;
  height: 40px;
}

.left:nth-child(5) {
  left: 0;
  top: 20%;
}

.left:nth-child(6) {
  transform: rotate(90deg);
  right: -60px;
  top: 220px;
}

.left:nth-child(7) {
  left: 0;
  bottom: 0;
}

.left:nth-child(8) {
  transform: rotate(90deg);
  left: -140px;
  top: 220px;
}

#container:has(.right:hover) .right {
  background-color: purple;
}
<div id="container">
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
</div>

(Codepen)

It's worth noting that the :has() selector is not supported in Firefox yet, but hopefully it will be in the near future. Refer to https://caniuse.com/css-has for browser compatibility information.

Answer №2

If you're looking to achieve the effect of making the green square (`right`) appear only when it's hovered (not when the container is hovered), there's a neat trick you can use instead of using `has`. By adjusting the `z-index` property of the `left` element using the `~` sibling selector, you can accomplish this.

body {
  margin: 0;
}

#container {
  position: relative;
  background-color: #d5d8dc;
  margin-top: 100px;
  margin-left: 100px;
  width: 400px;
  height: 400px;
}

.right {
  background-color: #2ecc71;
  position: absolute;
  width: 320px;
  height: 40px;
  z-index: 1;
}

.right:nth-child(1) {
  left: 20%;
}

.right:nth-child(2) {
  transform: rotate(90deg);
  right: -140px;
  top: 140px;
}

.right:nth-child(3) {
  left: 20%;
  bottom: 20%;
}

.right:nth-child(4) {
  transform: rotate(90deg);
  right: +140px;
  top: 140px;
  z-index: 3;
}

.left {
  background-color: #e74c3c;
  position: absolute;
  width: 320px;
  height: 40px;
  z-index: 2;
}

.left:nth-child(5) {
  left: 0;
  top: 20%;
}

.left:nth-child(6) {
  transform: rotate(90deg);
  right: -60px;
  top: 220px;
}

.left:nth-child(7) {
  left: 0;
  bottom: 0;
}

.left:nth-child(8) {
  transform: rotate(90deg);
  left: -140px;
  top: 220px;
}

.right:hover~.left {
  z-index: 0;
}
<div id="container">
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
</div>

Keep in mind that if you need to style the `right` elements differently based on previous elements, some cases might not be well-supported.

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

What is the best way to create a cornered button using CSS?

Is there a way to create a button using only CSS? https://i.stack.imgur.com/7mjVV.png This is the code I've come up with so far: .customButton { width: 100px; height: 100px; background: #6d1a3e; position: relative; transform: rotate(-90 ...

css

Tips for fading out two elements after completing a drag and drop action

Visit this Codepen for more examples - Codepen I have been developing a drag and drop feature in my application. Once the item is dropped, it transitions from red to green and fades out smoothly. The droppable element behind the draggable should also fad ...

javascriptjqueryhtmlcssjquery-ui

What is the best way to transfer an object property to an event handler function for executing DOM manipulation tasks?

I am working on a React-rendered HTML page that displays a list of objects representing websites. I have successfully stored these objects in memory and can show them in a long list on the page without any issues. Recently, I added a button for each objec ...

javascripthtmlreactjsdom

Obtain the state name after selecting it from the drop-down menu and clicking the submit button (part 3)

Read more about passing city names from PHP to JS in the second part of this discussion on Stack Overflow. This is the JSON data for states ($stateJsonObject): Array ( [0] => stdClass Object ( [stateId] => s1 [stateName] => Kuala Lumpur) ...

phphtmljson

Utilizing a custom filter for object manipulation within Vuetify's v-autocomplete

When using vuetify v-autocomplete with an object where the object consists of Key-Value pairs, the search functionality is based on the item-text. In my example, I am displaying the object as {1200-Chloride Systems}. Is it possible to make the search funct ...

javascripthtmlvue.jsvuetify.js

Tips for implementing a jQuery mouseleave function for multiple div elements sharing the same id

I am facing an issue with my website where multiple divs share the same id. I need to implement a mouseleave function for all of these divs that have this specific id. Within my $(document).ready function, I currently have the following code... $('#m ...

javascriptjqueryhtml

Teaching jQuery selectors to detect recently-added HTML elements

Unable to find a solution in the jQuery documentation, I am seeking help here for my specific issue. Embracing the DRY principle, I aim to utilize JavaScript to include a character countdown helper to any textarea element with maxlength and aria-described ...

javascripthtmljquerydom

Update the dropdown field selection to the color #333 with the help of javascript

I am facing an issue with a dropdown field that has placeholder text and options to select. Initially, both the placeholder text and the options were in color #333. However, I managed to change the color of the placeholder text to light grey using the foll ...

javascripthtmlcss

Generate clickable links on a web page with PHP and a form

Every week I find myself tediously creating links by manually copying and pasting. It's starting to feel like a crazy process, and I'm sure there must be a faster way. A123456 B34567 d928333 s121233 I need these numbers to be transformed into h ...

phpjavascripthtml

Tips on how to select only the currently active tab and change its background color

I am currently troubleshooting the AJAX tabs functionality on my website. The issue I am facing is that the current code does not apply any styling to indicate an active tab. I believe I may need to use some JavaScript code to address this problem, but I ...

jqueryhtmlcssajax

Ways to prevent a number input from deleting the initial 0 in a number

When making card payments, please note that we require a 3-digit security code. In certain cases, especially on older versions of Internet Explorer, there have been instances where codes starting with a 0 (e.g. 012) had the first 0 removed, resulting in o ...

html

Connect ng-models with checkboxes in input field

I am facing an issue with binding ng-models using ng-repeat in an input checkbox tag. Let me share my code and elaborate further. app/main.html: <div ng-repeat="feature in features"> <input type="checkbox" ng-model="features[$index].name"> ...

javascripthtmlangularjscheckboxangular-ngmodel

The React sidebar expanded to cover the entire screen width

As I work on creating a dashboard page that will display a sidebar after the user logs in, I am facing an issue where the sidebar is taking up the full width of the page, causing my Dashboard component to drop to the bottom. You can view the image link of ...

cssreactjsreact-routerreact-router-domsidebar

Displaying and Concealing Table Rows using Javascript

I am working with an array of prices that are being displayed in a table using a foreach loop. The goal is to hide specific rows in the table based on certain conditions. The $status variable is set to "YES" if the price is => 30, and "NO" if the price ...

javascriptphphtml

Consistency in table cell formatting

What is the best way to ensure all my table cells have a consistent height and width, regardless of their content? I am working on a crossword puzzle game where some cells are empty, some contain letters as the user fills in words, and others display butt ...

css

Is there a way to extract information from the HTML source code of an external website and display it in my application?

Seeking a method to search an external URL for content that matches "title" and then display the results on my HTML page using Javascript. Despite my efforts with Javascript, I have not come across any resources that address this issue. Could it be that I ...

javascriptjqueryhtml

What is the best way to pass a variable in PHP and create an HTML link to a specific element ID simultaneously?

Formulating the question may be challenging, but the concept is quite straightforward: I'd like to pass the variable 'count' using GET and simultaneously direct to the media section. On the page http://page.org.mx/comunicados#media I&apo ...

phphtmlhyperlink

Why might a responsive website automatically switch to mobile view?

My website has a responsive grid system that utilizes media queries with breakpoints. However, I am encountering an issue on IE8 where the "mobile version" of the site is being displayed as the default view even when the screen size is set to what should b ...

internet-explorercssresponsive-designmedia-queries

The div above the footer seems to be interfering with the styling of the footer. Is there a solution to

I am currently working on implementing a Help functionality for our users. In order to do this, I have placed a div right above my footer. However, I am facing an issue where the styling of my div is affecting the footer in ways that I cannot figure out. ...

htmlcssdom

Issue with exporting data from Datatables

I followed the instructions, and the Datatables export function worked perfectly in localhost, but when I tried it in Google Apps script, it didn't work. For more information about the issue, you can visit this link: DataTables TableTools buttons not ...

jqueryhtmlgoogle-apps-scriptdatatables