js 判断当前鼠标在哪个元素上

一、js 判断当前鼠标在哪个元素上

1、声明一个变量（如el），用来存放鼠标所在的元素节点。

2、在body元素上增加一个鼠标事件监听

3、使用事件对象中的target属性，每当鼠标经过一个元素时，就把它赋值给el变量

任何时候，读取el变量的值即为鼠标当前所在的元素。

varel=window.document.body;//声明一个变量，默认值为body

window.document.body.onmouseover=function(event){

el=event.target;//鼠标每经过一个元素，就把该元素赋值给变量el

console.log('当前鼠标在',el,'元素上');//在控制台中打印该变量

二、js 如何判断当前选中哪个tab页

这里分享下js判断当前选中哪个是tab页的方法。

1、首先来看一下要实现的效果，如下图所示，顶上是tab页卡，下面是内容。

2、然后准备页面的内容，如下图所示，tab运用ul布局，内容运用div布局。

3、接下来就是去除页面中的一些默认间距以及ul的list-style样式，如下图所示。

4、然后定义tab页卡以及内容的相关样式，如下图所示。

5、接着导入所需要的jquery的压缩库文件，如下图所示，版本大家自己选择。

6、最后就是实现选择一个页卡，然后展现页卡内内容的方法，JS实现tab页卡主要是运用了mouseenter的事件方法进行控制显示。

三、JavaScript OnMouseOut事件

1、javascript onmouseover和onmouseout事件

2、onmouseover和onmouseout鼠标移入移出时触发的事件：

3、 onmouseover用户鼠标移入元素时触发的事件。并执行onmouseover调用的函数。

4、 onmouseout用户鼠标移开元素时触发的事件。并执行onmouseout调用的函数。

5、onmouseover和onmouseout这两个事件在javascript中较常用。

6、下面通过一个示例更深入了解这两个事件的使用：

7、示例：鼠标移入时，改变字体的背景色，移出时，还原默认的背景色。

8、<title>鼠标移入时，改变字体的背景色，移出时，还原默认的背景色。</title>

9、.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}

10、 var woaixuexi=document.getElementById("woaixuexi");

11、 woaixuexi.style.background="yellowgreen";

12、 var xuexi=document.getElementById("woaixuexi");

13、 xuexi.style.background="#abcdef";

14、<div id="woaixuexi" onmouseover="aixuexi();" onmouseout="xuexi();" class="xuexi"></div>