title: How to force state hover in element
body: <p>I have a sidenav that when applied hover with the mouse it expands but needed to force the hover without the mouse necessarily being over the element</p>
  
  <p>What I need is that when the page starts it automatically starts with the hover applied and after a few seconds unapply</p>
  
  <p>.html</p>
  
  <pre><code>&lt;div class="sidenav custom-sidenav" #sideNav&gt;
    &lt;div class="text-sidenav"&gt;{{text}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.css</p>
  
  <pre><code>   .custom-sidenav div {
        position: fixed;
        right: -120px; 
        transition: 0.3s; 
        padding: 15px; 
        width: 140px; 
        text-decoration: none; 
        font-size: 20px; 
        color: white; 
        border-radius: 5px 0 0 5px; 
        z-index: 100;
      }
  
      .custom-sidenav div:hover {
        right: 0; 
      }
  
      .text-sidenav {
        position: relative;
        top: 200px;
        background-color: #2196F3; /* Blue */
      }
  </code></pre>
  
  <p>i try use ViewChild with elementRef but show this error </p>
  
  <blockquote>
    <p>this.sideNav.nativeElement.mouseover is not a function</p>
  </blockquote>
  
  <p>my ts</p>
  
  <pre><code>  @ViewChild('sideNav') private sideNav: ElementRef;
  
    @Input() text: string;
    constructor() { }
  
    ngOnInit() {
      this.sideNav.nativeElement.mouseover();
    }
  </code></pre>