When hovering over each ul li element, a new element is added to the right side of the text. The alignment of the text is centered by default, but upon hover, the alignment changes when the new element is added. However, the issue is that the alignment should not be affected when adding a new element on hover. For reference, here is the code snippet provided: https://stackblitz.com/edit/angular-emvs2v?file=src%2Fstyles.css
home.component.html
<div style="width:50%" class="text-center box">
<ul>
<li [class.btn-success]="selectedIndex === 1" (mouseout)="removeIndex(1)"
(mouseover)="setIndex(1)">Home <span class="float-right test">==></span>
</li>
<li [class.btn-success]="selectedIndex === 2" (mouseout)="removeIndex(2)"
(mouseover)="setIndex(2)">Contact Us <span
class="float-right test">==></span></li>
<li [class.btn-success]="selectedIndex === 3" (mouseout)="removeIndex(3)"
(mouseover)="setIndex(3)">Production<span
class="float-right test">==></span></li>
</ul>
</div>
<button (click)="getSelect()">Submit</button>
home.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
data: any;
selectedIndex = 1;
constructor () { }
ngOnInit () {
}
setIndex (index: number) {
this.selectedIndex = index;
}
removeIndex (index: number) {
this.selectedIndex = null;
}
getSelect () {
this.selectedIndex = 1;
}
}
css
ul li {
list-style-type: none;
}
.test {
display: none;
}
.btn-success .test {
display: block;
}
.text-center {
text-align: center;
}
.float-right {
float: light;
}