Saya memiliki sidenav yang ketika diterapkan hover dengan mouse itu mengembang tetapi perlu memaksa hover tanpa mouse harus berada di atas elemen

Yang saya butuhkan adalah ketika halaman dimulai secara otomatis dimulai dengan kursor diterapkan dan setelah beberapa detik tidak diterapkan

.html

<div class="sidenav custom-sidenav" #sideNav>
  <div class="text-sidenav">{{text}}</div>
</div>

.css

   .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 */
    }

Saya mencoba menggunakan ViewChild dengan elementRef tetapi menunjukkan kesalahan ini

this.sideNav.nativeElement.mouseover bukan fungsi

Ts saya

  @ViewChild('sideNav') private sideNav: ElementRef;

  @Input() text: string;
  constructor() { }

  ngOnInit() {
    this.sideNav.nativeElement.mouseover();
  }
1
user3140824 30 Oktober 2019, 19:18

1 menjawab

Jawaban Terbaik

Saya memecahkan masalah dengan bantuan @isherwood

Saya akan menyarankan bahwa rencana Anda cacat. Alih-alih mengandalkan status pseudo-hover, cukup atur perilaku yang Anda inginkan secara langsung. Gunakan kelas CSS

Html

<div class="sidenav custom-sidenav" [class.custom-sidenav-hover]="show">
  <div class="text-sidenav">{{text}}</div>
</div>

.css

.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-hover div{
  right: 0;
}


.text-sidenav {
  position: relative;
  top: 200px;
  background-color: #2196F3;
}

Ts saya

  @Input() text: string;
  @Input() cont: number;

  show: boolean;
  constructor() { }

  ngOnInit() {
    this.show = true;
    setTimeout(() => {
      this.show = false;
    }, this.cont);
  }
0
user3140824 30 Oktober 2019, 16:56