The hover property in CSS is used to create interactive effects, but when trying to apply similar functionality on mobile devices using touchstart and touchend events, I am encountering issues with the responsiveness of the events.
Below are the implementations of both touch events:
@HostListener('touchstart', ['$event']) onTouchStart(event: Event): void {
if (event) {
event.preventDefault();
}
let part = this.el.nativeElement.querySelector('.icon-interface-question-mark');
this.renderer.setElementStyle(part, 'color', 'green');
}
@HostListener('touchend', ['$event']) onTouchEnd(event: Event): void {
if (event) {
event.preventDefault();
}
let part = this.el.nativeElement.querySelector('.icon-interface-question-mark');
this.renderer.setElementStyle(part, 'display', 'yellow');
}
Here is the relevant CSS code:
.account-outlook-wrapper {
.icon-interface-question-mark {
color: yellow;
position: relative;
cursor: pointer;
&:hover {
color: green;
}
}
I made a modification to the CSS for testing purposes:
.account-outlook-wrapper {
.icon-interface-question-mark {
color: orange;
position: relative;
cursor: pointer;
&:hover {
color: red;
}
}
However, despite the changes in the CSS, the color remained green in a window browser due to the touchstart event. It was supposed to work only for mobile views. Please advise me on how to properly utilize both touch events.