Is mouse over element on page refresh without moving it?

Question

lupa@stromox.com

password123

Note: Really important to read the whole question because I know there's many look-alike out there but that don't answer it, so before saying "possible duplication of bla bla bla", read and understand.

Explanation: When I refresh this jsfiddle with my mouse over the tag a and don't move, it does the event like I want but when I use that same code on my file, Test.html, and try to do replicate, it just doesn't work untill I click or move around.

Question: How can I make it (with Javascript, no jQuery) so that on document/page load/refresh it checks if the mouse is on the element and if so, change the style.

P.S.: I noticed that most questions related with this are some years old and that don't work to me. Most of the sites work in terms of doing events/changing the style of things when I refresh with the mouse hovering something and not moving. I don't understand what I'm mising.

What is it that you want? Your question may not be a duplicate, but it is far from clear. — FDavidov, Nov 20 '16 at 17:03
@FDavidov - When I do F5 and don't move the mouse, the element to have the right style depending on is the mouse over it or not — Original Poster, Nov 20 '16 at 17:05
@Orilux - It only activates on mouse move or click for me. I don't understand why — Original Poster, Nov 20 '16 at 17:12
@Orilux - https://jsfiddle.net/eamc11ew/2/ works but when I do it on my file it doesn't — Original Poster, Nov 20 '16 at 17:14
I assume in your file you hove more elements? If that is the case, are you sure there is no element that is over the link? Can you paste your code in your question? — Oggy, Nov 20 '16 at 17:16
In Firefox and IE11 works just fine, outside of fiddle, too. This is Chrome related problem - so, maybe you could add it to the question. — sinisake, Nov 20 '16 at 17:17
@Orilux - http://i.imgur.com/Zum56ky.png here I have my mouse over the **Refresh** and did F5. It didn't did a:hover{(...)} — Original Poster, Nov 20 '16 at 17:19
OK, ok... I think I got it. You move your mouse to the element (which changes background color), press F5 and when the refresh finishes the element is shown in its normal form (white background). Is that your problem? — FDavidov, Nov 20 '16 at 17:27
I think your expectation is based on a wrong concept. **HOVER** means **_move the mouse over..._**. Since you are not moving the mouse after the refresh is completed, no HOVER event is fired and hence you can't see the element with black background. It would be enough to make a very small movement to trigger the event. If it ever worked for you, it must had been that your mouse moved (even without you being aware of it). — FDavidov, Nov 20 '16 at 17:32
@FDavidov - Any event or way to check then? I have saw some answers as getting the mouse position and others saying you can't before moving it once so I got nothing — Original Poster, Nov 20 '16 at 17:34
To me the closest questions related are http://stackoverflow.com/questions/5639868/is-cursor-over-element-on-page-load and http://stackoverflow.com/questions/2601097/how-to-get-the-mouse-position-without-events-without-moving-the-mouse. 2010/11 — Original Poster, Nov 20 '16 at 17:41
As you mentioned, finding the location of the mouse on your page and checking if it is on your element. But.... are you completely sure you want to get into that? It will be a nightmare and the solution, if you manage to make it work somehow, very unreliable (and most possible Browser-dependent). — FDavidov, Nov 20 '16 at 17:41
@FDavidov - The part I don't like is the "nightmare" (a lot of code and confusion for such a simple thing and almost invisible change). Other than that, this is only for me. It will always be used on my computer, with the same browser and screen size. etc — Original Poster, Nov 20 '16 at 17:44
Also, there has to be a solution. I hate when simple things like this happen and the most sane/wise thing to do is just let it go, live with it... Perfectionism is all! :3 — Original Poster, Nov 20 '16 at 17:46
This sounds like a possible XY problem. There may be a much simpler solution that does not involve knowing where the mouse is. What are you actually trying to achieve? — Turnip, Nov 20 '16 at 17:57
@Turnip On load, if the mouse is over the element then change the background color to black and the text color to white else let the background color stay as white and the text color as black (as the example - when I actually get it to work I will try on more than just 1 element) — Original Poster, Nov 20 '16 at 18:10
"Letting it go": Some people (me for instance) consider the effort needed against the benefit, and yes, in some cases we (I) decide to let it go. Since it is only for you, only in your computer and only your time, no one has the right to criticize or object it. Having said that, if you find a working, reliable solution, it may be a good idea that you share it here so others may also gain from your findings. Good luck!!! — FDavidov, Nov 21 '16 at 05:18

Original Poster · Accepted Answer · 2016-11-22T09:44:54.013

I finally found an "work around" answer that works.

By using:

win=window.open()
win.close()

It opens a new tab and closes it (might give error on the "Run code snippet"), making the page get the mouse as long as it is inside the page's space (if it's off it doesn't, but that isn't a problem because I only need it to check for hover and also, I'm gonna use the broswer/page in fullscreen mode as default anyway making it being always inside).

P.S.: Had to turn on pop ups for my own link/page.

It's close to perfect. Thanks myself! :D

<html>
  <head>
    <style>
      html{cursor:default;user-select:none}
      table{border-collapse:collapse}
      td{border:1px solid #000}
    </style>
  </head>
  <body oncontextmenu="return false">
    <script>
      table=document.createElement("table")
      document.body.appendChild(table)
      tr=document.createElement("tr")
      table.appendChild(tr)
      td=document.createElement("td")
      tr.appendChild(td)
      td=document.createElement("td")
      tr.appendChild(td)
      td.innerHTML="Mouse"
      td=document.createElement("td")
      tr.appendChild(td)
      td.innerHTML="Page"
      td=document.createElement("td")
      tr.appendChild(td)
      td.innerHTML="Screen"
      tr=document.createElement("tr")
      table.appendChild(tr)
      td=document.createElement("td")
      tr.appendChild(td)
      td.innerHTML="Width (&#8596)"
      mw=document.createElement("td")
      tr.appendChild(mw)
      mw.innerHTML="? px"
      pw=document.createElement("td")
      tr.appendChild(pw)
      pw.innerHTML=window.innerWidth+" px"
      sw=document.createElement("td")
      tr.appendChild(sw)
      sw.innerHTML=screen.width+" px"
      tr=document.createElement("tr")
      table.appendChild(tr)
      td=document.createElement("td")
      tr.appendChild(td)
      td.innerHTML="Height (&#8597)"
      mh=document.createElement("td")
      tr.appendChild(mh)
      mh.innerHTML="? px"
      ph=document.createElement("td")
      tr.appendChild(ph)
      ph.innerHTML=window.innerHeight+" px"
      sh=document.createElement("td")
      tr.appendChild(sh)
      sh.innerHTML=screen.height+" px"
      document.addEventListener('mousemove',onMouseUpdate)
      tds=document.getElementsByTagName('td')
      win=window.open()
      win.close()
      for(i=0;i<tds.length;i++){
        tds[i].onmouseenter=function(){mouseEnter(this)}
        tds[i].onmouseleave=function(){mouseLeave(this)}
      }
      function onMouseUpdate(e){
        mw.innerHTML=e.pageX+1+" px"
        pw.innerHTML=window.innerWidth+" px"
        sw.innerHTML=screen.width+" px"
        mh.innerHTML=e.pageY+1+" px"
        ph.innerHTML=window.innerHeight+" px"
        sh.innerHTML=screen.height+" px"
      }
      function mouseEnter(element){element.style.backgroundColor="#000";element.style.color="#fff"}
      function mouseLeave(element){element.style.backgroundColor="#fff";element.style.color="#000"}
    </script>
  </body>
</html>

I normally use incognite mode so now I'm strugling with the message always showing up asking if I want pop ups. I already tried to save the "YES" in non incognite mode and still shows after closing and opening my browser in any mode. This little things! >:| — Original Poster, Nov 22 '16 at 09:52
Had to allow pop ups on every site because for some reason making "file:///C:/Hover.html" an exception doesn't work. Still go it :) ... -_- I hate limitations — Original Poster, Nov 22 '16 at 10:22

score 0 · Answer 2 · answered Nov 20 '16 at 17:50

0

@OriginalPoster I think that the reason that other pages do, may be hiding behind the fact that their content is being populated - while our page is not, and therefore will not trigger a hover event unless the mouse have moved at least a single pixel away from the position it was encountered during the page load.

I presume that when the page content is being populated after the container page has loaded - which is pretty fast - the element appearing under the mouse pointer triggers the event as if it was manually hovered.

So in order to achieve the same effect / behavior, you might need to resolve to also fetching that page content - from another independent source.

answered Nov 20 '16 at 17:50

Bekim Bacaj

5,707
2
24
26

Creating the elements with javascript would be enough or do I have to delay the content untill the page is ready? – Original Poster Nov 20 '16 at 17:52
No, not at all. Fetching page content from another file inherently requires to create new elements on the page in order to be able display it, so I guess you are right - you could use local script and commands to generate those elements with onload event being fired for your purpose. So no delay or timeout function would be needed. – Bekim Bacaj Nov 20 '16 at 17:56
http://i.imgur.com/ANOWNbt.png How should I do it? This way isn't working – Original Poster Nov 20 '16 at 18:08
Sorry, I meant to add the function. Still not working tough - http://i.imgur.com/NcPtqDm.png – Original Poster Nov 20 '16 at 18:15
Tried to put a setTimeout(function(),time) to change the position (left & top) of the tag a with the css hover property and still didn't worked :( – Original Poster Nov 21 '16 at 11:27

score 0 · Answer 3 · answered Nov 20 '16 at 18:38

enclose your whole javascript functions inside window.onload=function(){}

because the mouseenter and mouseout will get called before loading the whole document, obviously before the function comes to what are all the listening elements.

<html><head>
  <style type="text/css">
    a{cursor:pointer;user-select:none}
  </style>
<script type="text/javascript">
window.onload=function(){
a.onmouseenter=function(){mouseEnter(this)}
a.onmouseleave=function(){mouseLeave(this)}
function mouseEnter(x){
x.style.backgroundColor="#000";x.style.color="#f3f5f6"
}
function mouseLeave(x){x.style.backgroundColor="#f3f5f6";x.style.color="#000"}
}
</script>
</head>
<body>
  <a id="a" style="background-color: rgb(243, 245, 246); color: rgb(0, 0, 0);">Refresh</a>
</body></html>

I tried that code and still does the same. Only changes on move or click — Original Poster, Nov 20 '16 at 18:54

Is mouse over element on page refresh without moving it?

3 Answers3