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

Retrieving data from an HTML input tag and storing it in a variable

Retrieve a div element using Ajax from the result of an If statement

Error: Definition Already Exists

Persist user input even after reloading the page

Prerender is running independently of the dynamic page title and meta tags rendering process

Objective subject for an element within a :not operation

Utilizing CSS in JS for nested hover styles with Material UI: a step-by-step guide

Get rid of the white border surrounding the object tag

Utilizing AJAX for autocomplete in HTML and inserting it into a page using innerHTML is causing issues with the functionality of forms on the website

Stop Scrolling on Web Pages with HTML5

Maintain selected values in a dropdown list that is generated dynamically

Chrome and Firefox browsers are not supporting HTML simple anchor links

SVGs appear at the forefront of all other elements

How to set a maximum width in IE8 when using width:100%?

In the present technological landscape, is it still considered beneficial to place Javascript at the bottom of web pages?

Effort to update Div element with Ajax fails to function

Exploring the Information Within HTML Forms

apostrophe cutting off a portion of the input field's value

Two neighboring sections containing dynamic elements. One section automatically adjusts its size to fit the content, while the other allows

Seeking instructions on incorporating multiple components in a tab section effectively?