Changing the structure of divs by using elements from different divs

Question

Changing the structure of divs by using elements from different divs

I'm looking for some help with adjusting the CSS of a div when hovering over certain elements. Here is my current code:

<div class = "container-main">
<div class = "container-inner">
<ul class = "list">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
</div>

<div class = "container1">
<p>Container text</p>
</div>

<div class = "container2">
<p>Container text</p>
</div>

I am trying to change the classes container1 and container2 when hovering over the ul or li within the main container. I currently only know how to do this with sibling containers, but that's not the effect I want.

.container-main:hover + .container1 {background:red;}

Any assistance in achieving this would be greatly appreciated. Thank you!

html css

Answer 1

Answer №1

Unfortunately, it seems that achieving what you desire solely with CSS is not feasible given your current markup hierarchy. However, a solution using JavaScript can easily accomplish this task. Below is a sample code snippet that demonstrates how to add a background-color to .container1 when hovering over .container-main ul:

const list = document.querySelector('.container-main ul')
const container1 = document.querySelector('.container1')

list.addEventListener('mouseenter', () => container1.classList.add('red'))
list.addEventListener('mouseleave', () => container1.classList.remove('red'))

.red {
  background-color: red;
}

<div class="container-main">
    <div class="container-inner">
        <ul class="list">
            <li>Option 1</li>
            <li>Option 2</li>
        </ul>
    </div>
</div>

<div class="container1">
    <p>Container text</p>
</div>

<div class="container2">
    <p>Container text</p>
</div>

Answer 2

Unfortunately, it seems that achieving what you desire solely with CSS is not feasible given your current markup hierarchy. However, a solution using JavaScript can easily accomplish this task. Below is a sample code snippet that demonstrates how to add a background-color to .container1 when hovering over .container-main ul:

const list = document.querySelector('.container-main ul')
const container1 = document.querySelector('.container1')

list.addEventListener('mouseenter', () => container1.classList.add('red'))
list.addEventListener('mouseleave', () => container1.classList.remove('red'))

.red {
  background-color: red;
}

<div class="container-main">
    <div class="container-inner">
        <ul class="list">
            <li>Option 1</li>
            <li>Option 2</li>
        </ul>
    </div>
</div>

<div class="container1">
    <p>Container text</p>
</div>

<div class="container2">
    <p>Container text</p>
</div>

Answer 3

Answer №2

Is this the desired outcome? Here is a jQuery code snippet for achieving it:

$( ".container-main li" ).hover(
    function() {
        //perform action while hovering 
    }, function() {
        //perform action after hover has ended 
        $(".container1").css("background", "red");
    }
);

Answer 4

Is this the desired outcome? Here is a jQuery code snippet for achieving it:

$( ".container-main li" ).hover(
    function() {
        //perform action while hovering 
    }, function() {
        //perform action after hover has ended 
        $(".container1").css("background", "red");
    }
);

Answer 5

Answer №3

Appreciate all the insights shared here. I was a bit uncertain about its feasibility, but I'm going to attempt restructuring my div hierarchy. While I'm aware that jQuery can accomplish this, I'm tasked with solely utilizing CSS without any additional programming languages.
Once more, thank you kindly. Your input has provided me with a clearer understanding of the adjustments needed.

Answer 6

Appreciate all the insights shared here. I was a bit uncertain about its feasibility, but I'm going to attempt restructuring my div hierarchy. While I'm aware that jQuery can accomplish this, I'm tasked with solely utilizing CSS without any additional programming languages.
Once more, thank you kindly. Your input has provided me with a clearer understanding of the adjustments needed.

Answer 7

Answer №4

Using just CSS may not be sufficient for this task. Do you have access to jQuery? Here is a helpful JSFiddle link

$(document).ready(function() {
  $(".container-main li").each(function(index) {
    $(this).hover(
      function() {
        div = ".container" + (index + 1);
        console.log("in_" + div);
        $(div).css("background-color", "red")
      },
      function() {
        div = ".container" + (index + 1);
        console.log("out_" + div);
        $(div).css("background-color", "white");
      });
  })

Answer 8

Using just CSS may not be sufficient for this task. Do you have access to jQuery? Here is a helpful JSFiddle link

$(document).ready(function() {
  $(".container-main li").each(function(index) {
    $(this).hover(
      function() {
        div = ".container" + (index + 1);
        console.log("in_" + div);
        $(div).css("background-color", "red")
      },
      function() {
        div = ".container" + (index + 1);
        console.log("out_" + div);
        $(div).css("background-color", "white");
      });
  })

Changing the structure of divs by using elements from different divs

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips on customizing default Polymer CSS

Disable the javascript link on small devices

How can I write the code to enable dragging the button for navigating to the next page?

Behold the magic of a three-column layout with sticky scroll behavior and an absolute

Obtaining gender information by utilizing checkboxes in Angular 7

Assist with JavaScript Programming

css displaying drop-down menu when hovered over

Is there a way to automatically load data whenever a specific inner div on an HTML page is modified?

Working with PHP to transfer toggle switch information to JSON

What is the best way to preload all videos on my website and across different pages?

What is the best way to create a new variable depending on the status of a button being disabled or enabled

CSS shrink effect upon hovering

Uncertain about the ins and outs of AJAX

Analyzing an HTML document

Tips for resolving a 403 error while utilizing selenium with Python

Adding hyperlinks that do not redirect

Combining all elements of my application into a single HTML, JS, and CSS file

Activate a CSS class on an image upon hovering over a div (WordPress)

Updating the background of the <html> tag using jQuery

Navigational strip within the grid