0

I have a link to my homepage that changes color when the mouse gets over it. When the user clicks, however, the page refreshes and the link turns back to the old color. I want the link to change to the new color again just because the mouse is there, but no mouse event is being fired with the mouse stopped. In JSFiddle, however, it works (putting the mouse over the text and refreshing all the page with F5), so I guess there must be a way. I don't want to use css :hover because the color is changed often, and I've found that changing a css value in javascript is kind of a nightmare. Or isn't it? Also, no JQuery, please.

function colorize() {
 this.style.color = '#C83';
}
function load() {
 var p1 = document.getElementById('p1');
  p1.addEventListener('mouseover',colorize);
}
p {
  font-size: 2em;
  background-color: #385;
}
<body onload='load()'>
  <p id='p1'>Some big text</p>
</body>
Rodrigo
  • 4,706
  • 6
  • 51
  • 94

1 Answers1

0

I gotta be honest with you, this scenario of yours

When the user clicks, however, the page refreshes and the link turns back to the old color.

seems more like an issue of force refreshing your page. Why are you forcing a refresh?

Based on this thread,

You can't. It's not a trusted event.

Events that are generated by the user agent, either as a result of user interaction, or as a direct result of changes to the DOM, are trusted by the user agent with privileges that are not afforded to events generated by script through the DocumentEvent.createEvent("Event") method, modified using the Event.initEvent() method, or dispatched via the EventTarget.dispatchEvent() method. The isTrusted attribute of trusted events has a value of true, while untrusted events have a isTrusted attribute value of false.

Most untrusted events should not trigger default actions, with the exception of click or DOMActivate events.

You have to add a class and add/remove that on the mouseover/mouseout events manually

There's just no standard/worth mentioning native way to do it.

You would have to retain the state somehow when refreshing. Passing a query string ?isMouseOver=true and parsing it back after the refresh should suffice. Just execute the same mouseover function after verifying the query string, no need to programmatically fire a mouseover event.

Or you can use jQuery, which has trigger-able mouse events.

But I would honestly avoid that force refresh solution and come up with something else

Abana Clara
  • 4,602
  • 3
  • 18
  • 31
  • I'm not forcing a refresh, only in JSFiddle. In my page the user clicks the link (a link to the main page) and goes back to the main page (with the mouse already over the link, which should then change color again). I wonder how JSFiddle does this... I think I'll try to get the mouse position somehow then, and see if it's over the link. – Rodrigo Apr 30 '19 at 02:35
  • @Rodrigo `I think I'll try to get the mouse position somehow then, and see if it's over the link`. I don't think this is even slightly advisable for such a mediocre task. – Abana Clara Apr 30 '19 at 02:38
  • I can't pass a GET, that would be ugly for the user. I could use localStorage, but I can't be sure the mouse will still be there after the page is reloaded. I see no other way than getting the mouse coordinates, if there's no event available. – Rodrigo Apr 30 '19 at 03:11