Hover Items and Mainparent Relation

### Example Relationship

const $hoverItems = $overlaySliderGrid.find('.hover-item'); // These are interactive items (e.g., thumbnails or buttons).
const $mainparent = $overlaySliderGrid.find('.content-overlayslider'); // This is the parent container for the overlay slider content.

// Adding a hover effect to `$hoverItems` that affects `$mainparent`
$hoverItems.on('mouseenter', function() {
    const index = $(this).index(); // Get the index of the hovered item.
    $mainparent.find('.slide-content').eq(index).addClass('active'); // Highlight corresponding content in the main parent.
});

$hoverItems.on('mouseleave', function() {
    const index = $(this).index(); // Get the index of the hovered item.
    $mainparent.find('.slide-content').eq(index).removeClass('active'); // Remove the highlight on mouse leave.
});

### Explanation
1. **Relation**:
– `$hoverItems` are the elements that the user interacts with, such as thumbnails or items within the slider grid.
– `$mainparent` contains the main slider content or overlays that need to respond to the interactions with `$hoverItems`.

2. **Functionality**:
– When a user hovers over any of the `$hoverItems`, it triggers a visual or content update in `$mainparent`, highlighting or changing the associated content.
– The `.index()` method is used to match the hovered item to its corresponding content in the parent.

### Assumptions
– `.hover-item` elements are related to `.slide-content` inside `.content-overlayslider`.
– Each hover-item corresponds to one `.slide-content` element in sequence.

Let me know if the relationship needs to be different or if you want a specific interaction style!