mouseover element not working using protractor

For none angular sites , please try the below code.The code has been tested and passed in protractor --version 5.4.2 with Chrome 79 the latest as per today .

describe('My first test class', function() {
    it('My function', function() {
        browser.driver.ignoreSynchronization = true;// for non-angular set true. default value is false 
        browser.waitForAngularEnabled(false);
        browser.driver.get('http://demoqa.com/menu/');
       //var menuElectronics= element(by.id('ui-id-4'));//We can define an element and move  to it 
      //browser.actions().mouseMove(menuElectronics).perform();
      //Directly find the element using id
      browser.actions().mouseMove(element(by.id('ui-id-4'))).perform();
       //Click on the element that appeared after hover over the electronics
       element(by.id('ui-id-7')).click();   
    });

})

One possible problem is that you need to make it wait for angular to load:

it('should display the popover-content on mouseover', function() {
     browser.get('http://localhost:9000/');
     browser.waitForAngular();

     browser.actions().mouseMove(element(by.css('.popover'))).perform();
     expect(element(by.css('.popover-content')).isDisplayed()).toBeTruthy();
 });

^{I've also removed the find() call (not sure if you really need it here) and fixed the parenthesis closing order in the last line.}

I sort of discovered a workaround to the mouse hover issue on chrome by accident. If we chain the mouseMove() method twice , it works.

Code that doesn't work on chrome:

browser.actions.mouseMove(element).click().perform();

Code with workaround(which works):

browser.actions.mouseMove(element).mouseMove(element).click().perform();