How can I remove onmouseover Event onclick of a button LWC

To nullify the onMouseover functionality in LWC, you can use a boolean variable to track the state of the button.

For example, you can declare a variable isButtonClicked in your JavaScript file and set it to false initially. Then, in your handleMouseOver function, you can check if isButtonClicked is true or false. If it is true, you can skip the mouseover logic. Otherwise, you can execute the mouseover logic as usual. Similarly, in your handleButtonClick function, you can set isButtonClicked to true when the button is clicked.

Here is a sample code snippet that illustrates this idea:

// YourComponent.js
import { LightningElement } from 'lwc';

export default class YourComponent extends LightningElement {
        isButtonClicked = false; // declare a boolean variable to track the button state

        handleMouseOver(event) {
                if (this.isButtonClicked) {
                        // skip the mouseover logic if the button is clicked
                        return;
                }
                // otherwise, execute the mouseover logic as usual
                // for example, change the background color of the div
                event.target.style.backgroundColor = 'yellow';
        }

        handleMouseLeave(event) {
                // reset the background color of the div
                event.target.style.backgroundColor = '';
        }

        handleButtonClick(event) {
                // set the button state to true when the button is clicked
                this.isButtonClicked = true;
                // do other things as needed
        }
}

.

<!-- YourComponent.html -->
<template>
        <div class="slds-col slds-size_8-of-12 messagecontainer"
        onmouseover={handleMouseOver}
        onmouseleave={handleMouseLeave}
        >
        This is a div with mouseover functionality
        </div>
        <button onclick={handleButtonClick}>Click me to nullify mouseover</button>
</template>