I have an Angular application where I need to calculate the width of an element and store it in a variable called finalposition. Then, I want to move this element to the left by (finalposition)px when hovering over it. How can I achieve this styling effect only on hover?
component.ts
ngAfterViewChecked(): void {
this.finalposition = document.getElementById('spandiv').offsetWidth;
}
component.html
<input id="inputCustome" type="text">
<p id="spandiv">xyzkskssss</p>
component.css
#inputCustomer {
text-align: center;
position: relative;
bottom: 7px;
left: 2px;
}
#spandiv {
position: absolute;
right:145px;
top: 40px;
background-color: #6B6664;
padding: 5px;
color:white;
font-weight: normal;
display: block;
opacity:0;
overflow: hidden;
}
#inputCustomer:hover + #spandiv {
position: absolute;
left: var(--finalPosition*2)+ "px"; // this value is not getting picked up
top:40px;
display: inline;
opacity:1;
}