js鼠标悬停事件

JavaScript021

js鼠标悬停事件,第1张

第一：js进行鼠标悬停事件来处理DOM实际上是不合理的。对于界面交互上能通过css处理的事件就不要用js来处理；

第二：恰好css对于鼠标悬停是有对应的选择器及其处理；

处理方法：如图A：

假设A的id为a，css代码如下：

#a{

    width:100px

    height:36px

    float:left

}

//对于位置的固定可以自行选择处理,当前用float固定。

#a:hover{

    width:200px

}

结果将会如你图中所需要的完成。

如必须用JS处理的话，代码如下：

//既定a的样式已明确：

//html代码:

<span id='a' onmouseover="fc1(this)"

 onmouseout="fc2(this)"></span>

<script>

    function fc1(node){

        node.style.width = '200px'

    }

    function fc2(node){

        node.style.width = '100px'

    }

</script>

一、首先需要div布局：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>js悬停</title>

<style type="text/css">

p {

width: 200px

height: 200px

background-color: skyblue

text-align: center

line-height: 200px

}

</style>

</head>

<body>

<p id="txt">我是一个DIV</p>

<script type="text/javascript">

var txt = document.getElementById('txt')

txt.setAttribute("title","鼠标悬停了")

</script>

</body>

</html>

二、div实在的在开发工具里面的代码效果如下截图：

三、这段代码最主要的重点是如下：

<script type="text/javascript">

var txt = document.getElementById('txt')

txt.setAttribute("title","鼠标悬停了")

</script>

四、实际代码在浏览器的渲染如下：