I have 5 squares. Hovering a square makes it green. Lets say I want to hover last-child and apply the blue to first-child, nth-child(1), nth-child(2), nth-child(3) is that possible without involving Jquery?
Same logic as would I hover square 3, then i'd want square 1+2 to become green.
As mentioned already, without Javascript it won't be really possible. Maybe with CSS 4?
Here is a quick version with plain javascript (no jQuery)
live demo
// Get all block-items
const items = document.querySelectorAll( '.block-item' );
// Helper function to set active class
const setState = ( index, active ) => {
if ( index >= 0 && items[ index ] ) {
// Only add active class when argument active is true
// Otherwise remove it
items[ index ].classList.toggle( 'active', active );
}
}
const onMouseEnter = index => {
setState( index - 1, true );
setState( index - 2, true );
};
const onMouseLeave = index => {
setState( index - 1, false );
setState( index - 2, false );
};
// Iterate over all items and add event listener
items.forEach( ( item, index ) => {
item.addEventListener( 'mouseenter', () => onMouseEnter( index ) );
item.addEventListener( 'mouseleave', () => onMouseLeave( index ) );
} );
