Question

我有5个方格。悬停在正方形上使其变绿。让我说我想悬停last-child并将蓝色应用于first-child, nth-child(1), nth-child(2), nth-child(3)是否可能而不涉及Jquery？

与我悬停在3号方面相同的逻辑，然后我希望方形1 + 2变为绿色。

Answer 1

如上所述，没有Javascript，它确实是不可能的。也许用CSS 4？

这是一个简单的javascript（没有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 ) );
} );

悬停最后一个孩子，但将风格应用于第一个孩子，n-child（1），n-child（2），n-child（3）

1 个答案: