protractor browser.actions().mouseMove() not showing hover effects
<p>I am new to protractor and trying to add tests for a slider panel which is closed by default and hovering mouse over will open it and then there are a list of items on the slider panel to pick.</p>

<pre><code>&lt;div class="slider" [ngClass]="{ closed: state === 1, open: state === 2}" (click)="onClick($event)" (mouseover)="onMouseOver($event)" (mouseleave)="onMouseLeave($event)"&gt;
</code></pre>

<p>I tried multiple ways, none of them work.</p>

<p><strong>First attempt:</strong>(no hover effect, ie, do nothing)</p>

<pre><code>browser.actions().mouseMove(element(by.css('.slider.closed'))).perform();
</code></pre>

<p><strong>Second attempt:</strong>( got an error: An invalid or illegal selector was specified)</p>

<pre><code>browser.actions().mouseMove(element(by.css('[(mouseover)="onMouseOver($event)"]'))).perform();
</code></pre>

<p><strong>Third attempt:</strong> (got an error: No element found using locator)</p>

<pre><code>browser.actions().mouseMove(element(by.css('[mouseover="onMouseOver($event)"]'))).perform();
</code></pre>