Interact with one div to trigger changes in another (CSS)

Question

Interact with one div to trigger changes in another (CSS)

I successfully influenced the style of one div when hovering over another div using the "+" selector, but I would prefer to find a different solution. My goal is for this interaction to work even if the .h div and the .t div are located in separate parent elements.

Here is my current code: http://jsfiddle.net/FranLegon/y06gg3vt/

(Although it may seem similar to other questions, the answers provided did not help me resolve this specific issue) While I prefer a CSS-only solution, please feel free to use JavaScript if necessary.

html css hover selector

Answer 1

Answer №1

Unfortunately, CSS lacks the ability to select parent or sibling elements, so JavaScript is necessary for achieving this effect:

var mainHeading = document.querySelector('.main-heading');
var subheadings = document.querySelectorAll('.subheadings .sub');

mainHeading.addEventListener('mouseover', function() {
  for(var i = 0 ; i < subheadings.length ; i++) {
    subheadings[i].style.display= 'none';
  }
});

mainHeading.addEventListener('mouseout', function() {
  for(var i = 0 ; i < subheadings.length ; i++) {
    subheadings[i].style.display= 'inline-block';
  }
});

Check out the Fiddle implementation here

Answer 2

Unfortunately, CSS lacks the ability to select parent or sibling elements, so JavaScript is necessary for achieving this effect:

var mainHeading = document.querySelector('.main-heading');
var subheadings = document.querySelectorAll('.subheadings .sub');

mainHeading.addEventListener('mouseover', function() {
  for(var i = 0 ; i < subheadings.length ; i++) {
    subheadings[i].style.display= 'none';
  }
});

mainHeading.addEventListener('mouseout', function() {
  for(var i = 0 ; i < subheadings.length ; i++) {
    subheadings[i].style.display= 'inline-block';
  }
});

Check out the Fiddle implementation here

Answer 3

Answer №2

Here is an easy jquery solution that utilizes the .hover() and .toggleClass() functions

Check out this example on jsfiddle

$(document).ready(function() {
    $('.h').hover(function() {
        $('.ts .t').toggleClass('hide');
    });
});

.hide{
    display: none;
}

Answer 4

Here is an easy jquery solution that utilizes the .hover() and .toggleClass() functions

Check out this example on jsfiddle

$(document).ready(function() {
    $('.h').hover(function() {
        $('.ts .t').toggleClass('hide');
    });
});

.hide{
    display: none;
}

Interact with one div to trigger changes in another (CSS)

Answer №1

Check out the Fiddle implementation here

Answer №2

Similar questions

HTML form submitting with a symbol illustration

What steps can be taken to address issues with the counting system in a lootbox opening

Tips on extracting all selectable text from a webpage using Python

Exploring the functionality of the Aria role attribute within Angular 2

How to set element height based on screen height rather than browser height

Ways to Retrieve JavaScript Variable inside HTML Tags in a JSP

Navigating through sibling elements can be accomplished by using various methods in

Using Python to interact with a website's Dropdown menu and trigger the submission

Avoiding Overlapping DIVs: Tips to Keep Your Elements in Place

The Issue of Missing HTML Registration Form Data in Django

What strategies can be implemented to improve the load time for bigvideo.js?

What is the best way to showcase data from input fields within a bootstrap modal dialog?

Obtaining table data and HTML elements using the correct code - Selenium and Python

Invoke the session on a different page and incorporate it into your JavaScript code

Issue with alignment in the multiselect filter of a React data grid

How can I prevent or override the text being pushed to the right by CSS::before?

How can I align the navigation bar in the center using Bootstrap?

Tips for disabling default browser input validation in React

Leveraging CSS attribute selectors within JSX using TypeScript

Personalizing/Concealing Navigation Controls