2013-10-10 59 views
-3

如何检查我的网站上是否有鼠标悬停在div上?我需要不断的验证。如果鼠标在div内容上出现,当不在时,内容消失。检查鼠标是否在div上

出现的内容还需要包含/允许链接。

+3

干了什么你试试? – user2092317

+1

你的标记,JavaScript代码和你的尝试在哪里? – PeeHaa

+1

Onmouseover?的OnMouseMove?你有尝试过什么吗? – j08691

回答

1

SHOW DEMO

的jQuery:

$(document).on({ 

    mouseenter: function() { 

     alert("Hello"); 

    }, 
    mouseleave: function() { 

     // alert("Bye"); 
    } 
}, "#div"); 
+0

tks,你解决了我的问题 –

0

结帐的CSS :hover选项link。您可以将它作为一种风格,您可以将其应用于div,链接,无论您需要什么。这是触发器,当鼠标在元素上方时。

0

使用CSS样式(最简单的方法) 因此,例如,当我们鼠标,背景会变成蓝色

在你的页面:

<div id="my_div">This text is in my div!</div> 

在你的CSS文件:

#my_div { 
background-color: white; 
} 

#my_div:hover { 
background-color: blue; 
} 

当然你也可以用javascript来检查它。

2

如果你愿意,你可以不用JavaScript来做到这一点。 Div响应:hover伪类。

你可以这样做:

#myCoolDiv { 
    /*Styles go here*/ 
    display: none; 
} 
#myCoolDiv:hover { 
    display: block /*Or whatever display type you want*/ 
} 

当然,这将使格完全消失。您可以将悬停指定给div中的某些文本,如果您希望其中的某些文字可见并且其中的一些内容在悬停之前不可见。

有关悬停的更多详细信息over on MDN

+0

这不是说一旦元素隐藏,悬停也停止了吗? – PeeHaa

+0

这就是为什么我把这个附录放在底部。他可以使用类或元素选择器来隐藏某些项目。如果没有发布示例代码,我没有太多的事情要做,所以我试图发布一个通用的解决方案。 – c1phr

1

我在这里资助这个代码,但是这只是给我的鼠标位置,在窗口中,而不是相对于一个div

<script language="JavaScript"> 
     var IE = document.all ? true : false; 
     if (!IE) { 
      document.captureEvents(Event.MOUSEMOVE) 
     } 

     document.onmousemove = getMouseXY; 

     var tempX = 0; 
     var tempY = 0; 

     function getMouseXY(e) { 
      if (IE) {// grab the x-y pos.s if browser is IE 
       tempX = event.clientX + document.body.scrollLeft; 
       tempY = event.clientY + document.body.scrollTop; 
      } else {// grab the x-y pos.s if browser is NS 
       tempX = e.pageX; 
       tempY = e.pageY; 
      } 
      if (tempX < 0) { 
       tempX = 0; 
      } 
      if (tempY < 0) { 
       tempY = 0; 
      } 
      document.Show.MouseX.value = tempX; 
      document.Show.MouseY.value = tempY; 
      return true; 
     } 
    </script>