...怎么一次创建两个事件,比如鼠标悬停改变背景颜色和字体颜色?_百度...

发布网友发布时间：2022-04-23 13:32

共3个回答

热心网友时间：2022-05-18 16:32

举个粟子，写一个段落“鼠标悬停时把字体颜色变成红色，背景颜色变成灰色，离开时恢复”：
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>会变色的段落</title>
<script>
function chfgcolor(){
var e=document.getElementById("demo");
e.style.color="red";
}
function chbgcolor(){
var e=document.getElementById("demo");
e.style["background-color"]="grey";
}
function chback(){
var e=document.getElementById("demo");
e.style="color:#000000; background-color:#ffffff;"
}
</script>
</head>
<body>

<p id="demo" onmouseover="chfgcolor();chbgcolor();" onmouseout="chback();">这是一会变色的段落</p>

</body>
</html>

以下是运行效果截图：

代码截图

悬停前和离开后

动图

代码说明：这里面确实一次为这个段落创建了两个事件，都是DOM通用的事件，一个叫mouseover(鼠标悬停)，一个叫mouseout（鼠标离开），mouseover事件触发时要用到2个函数（function）, 分别是chfgcolor和chbgcolor, 而mouseout只用到1个chback函数。
还有，事件触发时会运行一些东西，但是不一定是函数。

追答

更直观地说，可以在开发人员工具的查看器里面看到这两个事件（event）





热心网友时间：2022-05-18 17:50

首先你要理解什么是事件，鼠标悬停是事件，去触发方法

而你所说的改变背景颜色，改变字体颜色，都是方法里执行的
你可以写一个JS方法，把两句代码都写着一个方法里，然后鼠标悬停事件去触发JS方法