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

jQuery failing to trigger onClick event for a specific group of buttons

Can someone explain how to implement an onclick event for a div element inside an iframe using jquery or javascript?

CSS overflowing issue causing inability to reach bottom of div with scroll bars not functioning as anticipated

angular-ui-tab-scroll: Odd spacing between blocks and tabs, each separated individually

Changing font styles using the jMenu jQuery plugin: A step-by-step guide

Mentioning VARs found on additional pages

Element with adhesive properties alters its color at a particular location

How can I implement a jQuery slide down effect for a specific individual instance?

Is there a way to remove backdrop-filter: blur effect from elements within a div?

Inserting HTML content into a DIV with the help of jQuery

Height of inline-block list items in ul is not properly adjusted

Center Align Images in HTML List Items

JavaScript array images are not showing when using the img tag

Creating an accessible order for the next and back buttons

Can you navigate to HTML files using Vue router?

Issue with enabling overflow-y: scroll within a Bootstrap Modal

Mobile responsiveness malfunctioning

Positioning CSS icons beside text

A problem arises in Next.js when CSS is not rendering properly during Server Side Rendering

Is it possible to dynamically set the maximumSelectionLength in a select2 dropdown?