怎么编程实现JS,鼠标事件

发布网友发布时间：2022-04-23 18:09

共3个回答

热心网友时间：2022-04-21 17:46

第一：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>

热心网友时间：2022-04-21 19:04

简单的示例 div的背景色会随着鼠标进入变红离开变白点击变绿双击变蓝 var divs = document.getElementsById('div1'); divs.onmouseover = function(){ this.style.background = 'red' } divs.onmouseout = function(){ this.style.background = '' } divs.onclick = function(){ this.style.background = 'green' }divs.ondblclick = function(){ this.style.background = 'blue' }

代码要写在 window.onload () 或者 document.onready()追问复制nmb

热心网友时间：2022-04-21 20:39

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img src="1.png" alt="图片一" />
<script>
var image = document.getElementsByTagName("img").item(0);
image.onmouseover = function () {
        image.src="2.png";
image.alt="图片二";
};
image.onmouseout = function () {
        image.src="1.png";
image.alt="图片一";
}
</script>
</body>
</html>