Question

lupa@stromox.com

password123

注意：阅读整个问题非常重要，因为我知道那里看起来很多但是没有回答它，所以在说“可能重复bla bla bla”之前，请阅读并理解。

说明：当我用标记a上的鼠标刷新此jsfiddle并且不移动时，它会像我想要的那样完成事件但是当我使用它时我的文件，Test.html上的相同代码，并尝试进行复制，它只是不起作用，直到我点击或移动。

问题：如何制作它（使用Javascript，没有jQuery），以便在文档/页面上加载/刷新它检查鼠标是否在元素上，如果是，则更改样式。

P.S。：我注意到与此相关的大多数问题已有几年之久，对我不起作用。大多数网站在做事件/改变事物风格方面工作，当我用鼠标盘旋而不移动时刷新。我不明白我在做什么。

Answer 1

我终于找到了一个有效的“解决方案”答案。

使用：

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

它会打开一个新选项卡并关闭它（可能会在“运行代码片段”中出错），只要它在页面的空间内就会使页面获得鼠标（如果它不关闭它，但是这不是问题，因为我只需要它来检查悬停，而且，我将在全屏模式下使用broswer /页面作为默认值，无论如何使它始终在里面。）

P.S。：必须为我自己的链接/页面打开弹出窗口。

接近完美。谢谢！：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>

Answer 2

@OriginalPoster我认为其他页面的原因可能隐藏在他们的内容被填充的事实背后 - 而我们的页面没有，因此不会触发悬停事件，除非鼠标至少移动了单个像素远离页面加载期间遇到的位置。

我认为当容器页面加载后正在填充页面内容时 - 这非常快 - 出现在鼠标指针下的元素会触发事件，就好像它是手动悬停一样。

因此，为了实现相同的效果/行为，您可能需要解决从另一个独立来源获取该页面内容的问题。

Answer 3

将您的整个javascript函数包含在window.onload=function(){}

中

因为在加载整个文档之前会调用mouseenter和mouseout，显然在函数到达所有的听音元素之前。

<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>

鼠标在页面上的元素刷新而不移动吗？

3 个答案: