Saturday, April 13, 2024
 Popular · Latest · Hot · Upcoming
190
rated 0 times [  195] [ 5]  / answers: 1 / hits: 9765  / 4 Years ago, thu, december 5, 2019, 12:00:00

I am running angular app, I calculate width of element and store it under variable finalposition and I want to move to left (finalposition)px. I want this style property to be applied only on hovering over the element. How to do this?



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;

}


More From » html

 Answers
9

You can use (mouseenter) and (mouseleave) to set finalPosition value.



Try:



<input id=inputCustome type=text (mouseenter)=finalPosition = finalPosition * 2 (mouseleave) =finalPosition = finalPosition /2>
<p id=spandiv [style.left]=finalPosition + 'px' >xyzkskssss</p>


or



<input id=inputCustome type=text (mouseenter)=finalPosition = finalPosition * 2 (mouseleave) =finalPosition = finalPosition /2>
<p id=spandiv [ngStyle]={'left': finalPosition + 'px'} >xyzkskssss</p>


Demo


[#5414] Tuesday, December 3, 2019, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
maxinec

Total Points: 117
Total Questions: 116
Total Answers: 116

Location: Bangladesh
Member since Sat, Jan 23, 2021
3 Years ago
;