Hover Effect Implementation

January 31, 2025 ยท AI Conversations

User
Fahrzeugmarkt
apply on hover/out using js and change background and image src fusion-column
Assistant
To implement a hover effect on the `.fusion-column` element that changes its background color and the image source, you can use JavaScript (or jQuery) to achieve this effect. Below is a simple example using plain JavaScript:

### HTML Structure

<div class="fusion-column content-box-column content-box-column content-box-column-1 col-lg-6 col-md-6 col-sm-6 fusion-content-box-hover content-box-column-first-in-row" id="hover-column">
    <div class="col content-box-wrapper content-wrapper link-area-link-icon icon-hover-animation-none" style="background-color:rgba(255,255,255,0);" data-animationoffset="100%">
        <div class="heading heading-with-icon icon-left">
            <div class="image">
                <img id="hover-image" loading="lazy" decoding="async" src="https://autohaus.newsoftdemo.info/wp-content/uploads/2025/01/car_rental-1.svg" width="64" height="64" alt="">
            </div>
            <h2 class="content-box-heading fusion-responsive-typography-calculated" style="font-size: 18px; line-height: 1.28; --fontSize: 18; --minFontSize: 18;" data-fontsize="18" data-lineheight="23.04px">Fahrzeugmarkt</h2>
        </div>
    </div>
</div>

### JavaScript
You can add the following JavaScript code to change the background color and image source on hover:

// Get the fusion-column element and the image
const fusionColumn = document.getElementById('hover-column');
const hoverImage = document.getElementById('hover-image');

// Define the original and hover image sources
const originalImageSrc = 'https://autohaus.newsoftdemo.info/wp-content/uploads/2025/01/car_rental-1.svg';
const hoverImageSrc = 'https://autohaus.newsoftdemo.info/wp-content/uploads/2025/01/your-hover-image.svg'; // Replace with the hover image URL

// Define the original and hover background colors
const originalBgColor = 'rgba(255, 255, 255, 0)';
const hoverBgColor = 'rgba(200, 200, 200, 0.5)'; // Replace with your desired hover color

// Add mouseover event to change styles on hover
fusionColumn.addEventListener('mouseover', () => {
    fusionColumn.style.backgroundColor = hoverBgColor;
    hoverImage.src = hoverImageSrc;
});

// Add mouseout event to revert styles
fusionColumn.addEventListener('mouseout', () => {
    fusionColumn.style.backgroundColor = originalBgColor;
    hoverImage.src = originalImageSrc;
});

### Explanation
1. **HTML Structure**: The `fusion-column` div contains the image and heading.
2. **JavaScript**:
– Selects the elements you want to manipulate.
– Defines original and hover states for the image source and background color.
– Adds event listeners for `mouseover` and `mouseout` events to change the styles accordingly.

### CSS (Optional)
If you want to add a smooth transition effect for the background color, you can add the following CSS:

.fusion-column {
    transition: background-color 0.3s ease;
}

### Note
– Make sure to replace `your-hover-image.svg` with the actual URL of the image you want to use when hovered.
– This code can be added to a “ tag at the bottom of your HTML or in an external JavaScript file linked to your page.

User
all columns under hover-icon-box id
Assistant
If you want to apply the hover effect to all columns under a specific parent element with the ID `hover-icon-box`, you can modify the JavaScript to select all relevant columns. Below is an example of how to achieve this:

### HTML Structure
Assuming you have multiple columns under the `hover-icon-box` ID, your HTML structure might look like this:

<div id="hover-icon-box">
    <div class="fusion-column content-box-column content-box-column-1 col-lg-6 col-md-6 col-sm-6 fusion-content-box-hover">
        <div class="col content-box-wrapper content-wrapper link-area-link-icon icon-hover-animation-none" style="background-color:rgba(255,255,255,0);" data-animationoffset="100%">
            <div class="heading heading-with-icon icon-left">
                <div class="image">
                    <img class="hover-image" loading="lazy" decoding="async" src="https://autohaus.newsoftdemo.info/wp-content/uploads/2025/01/car_rental-1.svg" width="64" height="64" alt="">
                </div>
                <h2 class="content-box-heading fusion-responsive-typography-calculated" style="font-size: 18px; line-height: 1.28;">Fahrzeugmarkt</h2>
            </div>
        </div>
    </div>
    <div class="fusion-column content-box-column content-box-column-2 col-lg-6 col-md-6 col-sm-6 fusion-content-box-hover">
        <div class="col content-box-wrapper content-wrapper link-area-link-icon icon-hover-animation-none" style="background-color:rgba(255,255,255,0);" data-animationoffset="100%">
            <div class="heading heading-with-icon icon-left">
                <div class="image">
                    <img class="hover-image" loading="lazy" decoding="async" src="https://autohaus.newsoftdemo.info/wp-content/uploads/2025/01/car_rental-1.svg" width="64" height="64" alt="">
                </div>
                <h2 class="content-box-heading fusion-responsive-typography-calculated" style="font-size: 18px; line-height: 1.28;">Another Column</h2>
            </div>
        </div>
    </div>
    <!-- Add more columns as needed -->
</div>

### JavaScript
You can modify the JavaScript code to apply the hover effect to all columns under the `hover-icon-box` ID:

// Get all fusion-column elements under hover-icon-box
const fusionColumns = document.querySelectorAll('#hover-icon-box .fusion-column');

// Define the original and hover image sources
const originalImageSrc = 'https://autohaus.newsoftdemo.info/wp-content/uploads/2025/01/car_rental-1.svg';
const hoverImageSrc = 'https://autohaus.newsoftdemo.info/wp-content/uploads/2025/01/your-hover-image.svg'; // Replace with the hover image URL

// Define the original and hover background colors
const originalBgColor = 'rgba(255, 255, 255, 0)';
const hoverBgColor = 'rgba(200, 200, 200, 0.5)'; // Replace with your desired hover color

// Loop through each column and add event listeners
fusionColumns.forEach(column => {
    const hoverImage = column.querySelector('.hover-image');

    // Add mouseover event to change styles on hover
    column.addEventListener('mouseover', () => {
        column.style.backgroundColor = hoverBgColor;
        hoverImage.src = hoverImageSrc;
    });

    // Add mouseout event to revert styles
    column.addEventListener('mouseout', () => {
        column.style.backgroundColor = originalBgColor;
        hoverImage.src = originalImageSrc;
    });
});

### Explanation
1. **HTML Structure**: Each column is wrapped in a `fusion-column` div and all are children of the `hover-icon-box` div.
2. **JavaScript**:
– Uses `querySelectorAll` to select all columns under the `hover-icon-box` ID.
– Loops through each column and adds `mouseover` and `mouseout` event listeners to change the background color and image source.

### CSS (Optional)
You can use the same CSS for smooth transitions:

.fusion-column {
    transition: background-color 0.3s ease;
}

### Note
– Ensure you replace `your-hover-image.svg` with the URL of the image you want to display on hover.
– This script will apply the hover effect to all columns under the specified parent element.

Leave a Comment

Your email address will not be published. Required fields are marked *