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

Prevent FullCalender date cells from resizing when additional events are added

I am currently utilizing JQuery's FullCalendar plugin for my project and I have observed that the date cells expand when multiple events coincide on a single date. For example, as shown in this image, the date cell for February 4 is expanding. Is the ...

javascriptjqueryhtmlcssfullcalendar

Tips for retrieving user input and displaying it on an HTML page

I have encountered an issue with displaying user input in a table. The code for the table display is as follows: <tr ng-repeat="user in users" ng-class-even="'bg-light-grey'" ng-if="isLoading==false"> <td> ...

javascripthtmlangularjs

A simple demo showcasing interactive HTML pages using Django and AJAX

In my search for answers, I came across the following helpful posts: How to Reload table data in Django without refreshing the page Tutorial on Django dynamic HTML table refresh with AJAX Despite the insights from these posts, I am still facing chal ...

pythonhtmlajaxdjango

Choose the heading element based on its class

I am trying to target a specific element by its class and store it in a variable, but I specifically need this element to be a heading element. To clarify: at any given time, there are always exactly 3 elements with this particular class on my page: an < ...

javascriptjqueryhtmldom

Implementing file change detection using view model in Angular

When using the input type file to open a file and trigger a function on change, you can do it like this: <input type="file" multiple="multiple" class="fileUpload" onchange="angular.element(this).scope().fileOpened(this)" /> The functi ...

javascripthtmlangularjs

Trouble with custom font updates in Hugo using Blogdown

Recently, I've been immersing myself in Blogdown to create my own personal data blog: Using the academic theme as a base, I successfully tweaked the color scheme without any hiccups. However, despite making adjustments in my params.yaml file, none o ...

htmlmarkdownhugoblogdowntoml

What's the reason behind jQuery's position() and offset() methods returning decimal numbers in Chrome browsers?

In my HTML document, I have a simple div tag that is absolutely positioned. In Chrome, when I set the CSS rule "right" to a fixed value in pixels and "left" to "auto", then use jQuery's position() method to determine its left position immediately afte ...

jquerycssgoogle-chrome

What's the difference between using find_all on a bs4.element.ResultSet object and a list in Beautiful Soup

When I use the find_all method on a beautifulsoup object, it returns either an bs4.element.ResultSet object or a list. However, I am unable to directly apply the find_all method on the bs4.element.ResultSet object. One way to work around this is by loopin ...

pythonhtmlbeautifulsouphtml-parsing

Is there a way to transfer all the selected items to PHP using AJAX?

I am looking for a way to send all the checked items into PHP using AJAX. I want to include the checkbox ID and inner text in the information that is sent. For example, if I check box1 and box2, I want the relevant information to be saved in Data and then ...

javascriptphpjqueryhtmlajax

Utilize jQuery to insert a span element inside a paragraph element before it is appended to the DOM

My current task involves utilizing jQuery DOM elements to insert a few paragraphs into a div. The following code accomplishes this successfully: $('#detail_overlay').append($('<p />', { "class" : "detail_txt" }) .text( $(' ...

jqueryhtmlcss

Include a basic downward-pointing arrow graphic to enhance the drop-down navigation menus

I am working on a website that has drop-down menu headings styled with CSS. I am looking to enhance these certain menu headers by adding small down-facing arrows indicating they are clickable. Does anyone have any suggestions on how I can achieve this? ...

htmlcssuser-interface

Performance issues with jquery addClass and removeClass functions observed in Internet Explorer 11

I am currently working on an application that monitors nodes within a cluster, and I have created a visual state example to demonstrate this. Each small box in the grid represents a node, and when hovering over a node, the rest of the nodes in that particu ...

javascriptjquerycssfrontend

What could be causing my tab code to not function flawlessly?

I am attempting to implement a tab concept on my website. For example, the tab names are Monday...Tue.. up to Sunday. Each tab contains an image file based on the days (size 460*620). When I run my page, it shows all images, but what I need is for the imag ...

javascripthtmlcss

Tips for customizing Bootstrap theme color schemes in a React/Redux application that has been bootstrapped

As a newcomer to REACT, I am facing an issue with changing the theme colors in my freshly bootstrapped react application. I have gone through some solutions suggested by others but none of them seem to work for me. My entry point looks like this: import ...

cssreactjssassbootstrap-4

Prevent the function from being repeatedly triggered as the user continues to scroll

I am facing an issue with my app where new content is fetched from the API using the infinity scroll method when the user reaches near the bottom of the screen. However, if the user scrolls too fast or continuously scrolls to the bottom while new content i ...

javascripthtmlreactjsreduxreact-redux

the quickest method to apply font-weight:bold; to the text within the component

Is there a way to apply font-weight: bold; only to the inner content of a component in a scss file while avoiding affecting the component tag itself? :host { font-weight: bold; } Although this code works, it also affects the component tag itself. What ...

cssangularsass

Dynamic header following the scroll position

I'm experiencing an issue where my background moves with the scrollbar, causing the header of the page to scroll along. I've included my code and a screenshot for reference. Any assistance would be greatly appreciated. Thank you. Here's my ...

htmlcssscrollbarbackground-image

Issues with ng-bind-html in AngularJS and JavaScript are preventing it from functioning

I am experimenting with creating a dynamic webpage that can change its contents without being limited to predefined templates (potentially offering infinite template options). Below is the code I am currently testing: <!DOCTYPE html> <html lang= ...

javascripthtmlangularjs

Enhance your AngularJS skills by incorporating multiple conditions into the ternary operations of ng-class

I am struggling to apply multiple classes when the condition in the ng-class attribute evaluates to true. Here is the code I have attempted so far, but it doesn't seem to be working: <div class="col-md-4" ng-mouseover="hoverButton=true" id="plai ...

javascriptcssangularjsternary-operatorng-class

Using the power of Selenium's XPath, we can easily navigate through a table to access

Looking for assistance in creating selenium xpath for the various column links within a table. Each row has a unique identifier and contains information about a product, including the name. Based on the product name, I need to locate other links within the ...

cssxpathselenium