JavaScript基础 鼠标放上触发事件onmouseover 鼠标移开触发事件onmouseout

镇场诗:
    清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
    学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————

code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<style type="text/css">
        .testDiv{
            height:200px;
            width:200px;
            background-color:green;
        }
	</style>
    <script type="text/javascript">
        function MouseOver(obj)
        {
            obj.style.backgroundColor = "red";
        }

        function MouseOut(obj)
        {
            obj.style.backgroundColor = "green";
        }
    </script>
</head>
<body>
    <div class="testDiv" onmouseover="MouseOver(this)" onmouseout="MouseOut(this)">

    </div>
</body>
</html>

result:

  鼠标放上

  鼠标移开,

——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。IDE: VS2015;浏览器: Firefox。
html+css+js,强,值得努力学习。传智播客的视频教程是我的学习资源,推荐。
如果博文有可以改进的地方,请留下评论,我会认真思考的。

注:我是一位正在努力的普通人,此文仅供测试与参考使用,不可做其他用途。当参考博文内容时,代表您已接受使用条款。

时间: 2024-10-17 01:00:22

JavaScript基础 鼠标放上触发事件onmouseover 鼠标移开触发事件onmouseout的相关文章

JavaScript基础 通过id查找节点 通过节点的style属性添加鼠标放上出现小手的效果 getElementById style

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

WinForm 鼠标进入移开窗体事件,因子控件导致的误触发

1 /// <summary> 2 /// 重写OnControlAdded方法,为每个子控件添加MouseLeave事件 3 /// </summary> 4 /// <param name="e"></param> 5 protected override void OnControlAdded(ControlEventArgs e) 6 { 7 Control control = e.Control; // 获取添加的子控件 8 c

css特效,鼠标放上显示标题说明

鼠标放上去,出现屏蔽层.标题.说明,第一个有3D上下滑动效果,第二个有渐变效果 两个css实现的效果图如下: 1. CSS样式特效 1 <style type="text/css"> 2 3 *{ 4 margin:0; 5 padding:0 6 } 7 8 body{font:400 14px/150% 'Microsoft YaHei',Tahoma, Helvetica, Arial, sans-serif; color:#424242; background:#f

抽屉head部分,hover应用,鼠标放上变色

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pg_head{ 8 background-color: #2459a2; 9 position: fixed; 10 top: 0; 11 right: 0; 12 le

3、selenium 实现鼠标移动到元素上,并操作元素(鼠标放上后才出现的元素)点击

1.获取鼠标将移动到的元素 List<WebElement> list1 = driver.findElement(By.id("AAA")).findElements(By.className("BBB")); WebElement we = list1.get(0);2.鼠标移动 action.moveToElement(we).perform();3.等待3s Thread.sleep(4000);4.JavascriptExecutor 定义 J

jq div鼠标放上、离开马上展开、收缩方法

<body> <div id="aa" style="width:500px; height:30px; border:1px solid #000"></div> <div id="bb" style="width:500px; height:300px; border:1px solid #000; display:none"></div> </body&g

td里的内容宽度自适应 及 鼠标放上显示标题div title

td里的内容自适应宽度, 用 width:100%控制 strRight+="<td bordercolor='#DEDEDE' width='500px' height='50px'><div title='"+data[i].description+"'><textarea rows='2' "+disWord+" class='txt' id='description' style='font-size:12px; co

easyui 单元格超出鼠标放上弹出全部

其他方式:https://www.cnblogs.com/raitorei/p/9878192.html onLoadSuccess : function(data) { //单元格超出部分隐藏并鼠标移动到单元格时弹框显示 $(".datagrid-row td div").each(function() { $(this).attr("title", $(this).text()); }); } 原文地址:https://www.cnblogs.com/raito

js 鼠标放上选中

<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <body> <