在网页浏览中我们可以发现在有些页面的部分当我们鼠标移动到某个板块的时候会发现它弹出一个新的板块并且当鼠标移出后又自动隐藏,是因为在改板块中使用了javascript中的onmouseover和onmouseout这两个事件来实现的操作.
1.onmouseover定义和用法
onmouseover 事件会在鼠标指针移动到指定的对象上时发生。
语法
onmouseover="SomeJavaScriptCode"
| 参数 | 描述 |
|---|---|
| SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript。 |
支持该事件的 HTML 标签：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
2.onmouseout定义和用法
onmouseout 事件会在鼠标指针移出指定的对象时发生。
语法
onmouseout="SomeJavaScriptCode"
| 参数 | 描述 |
|---|---|
| SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript。 |
支持该事件的 HTML 标签：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
在接下来我们用一个实例来进行讲解这两个事件的作用:
代码如下:
<html>
<head>
<title>js操作</title>
<style>
.div_in{
width:330px;
height:165px;
}
.div_in2{
width:321px;
height:20px;
padding:18px 0 17px 0;
line-height:22px;
font-size:14px;
border: 1px solid rgb(234, 238, 237);
}
.div_meau1{
display:inline-block;
padding-left:15px;
font-size:18px;
font-weight:500;
padding:0 8px;
}
.div_meau2{
margin:0 5px 5px 0;
padding:0 8px;
display:inline-block;
}
.div_tag1{
width:200px;
height:400px;
margin-top:-50px;
margin-left:322px;
border: 1px solid rgb(234, 238, 237);
display:none;
}
.div_tag2{
width:200px;
height:400px;
margin-top:100px;
margin-left:200px;
border: 1px solid rgb(234, 238, 237);
display:none;
}
</style>
<script type="text/javascript">
function myClickshow(one){
var event=document.getElementById(one);
event.style.display="block";
}
function myClickhide(one){
var event=document.getElementById(one);
event.style.display="none";
}
</script>
</head>
<body>
<div class="div_in">
<div class="div_in2" onmouseout="myClickhide('one1')" onmouseover="myClickshow('one1')">
<div class="div_meau1">技术</div>
<div class="div_meau2">Java</div>
<div class="div_meau2">PHP</div>
<div class="div_meau2">C++</div>
<div class="div_meau2" style="margin-left:10px;">区块链</div>
<img src="logo.png" />
<div id="one1" class="div_tag1" onmouseout="myClickhide('one2')" onmouseover="myClickshow('one2')">
<div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</div>
<div class="div_meau2">Java</div>
<div class="div_meau2">PHP</div>
<div class="div_meau2">C++</div>
<div class="div_meau2">C#</div>
<div class="div_meau2">数据挖掘</div>
<div id="one2" class="div_tag2">
<div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</div>
<div class="div_meau2">Java</div>
<div class="div_meau2">PHP</div>
<div class="div_meau2">C++</div>
<div class="div_meau2">C#</div>
<div class="div_meau2">数据挖掘</div>
</div>
</div>
</div>
<div class="div_in2" onmouseout="myClickhide('two1')" onmouseover="myClickshow('two1')">
<div class="div_meau1">产品</div>
<div class="div_meau2">产品总监</div>
<div class="div_meau2">产品经理</div>
<div class="div_meau2" style="margin:0px;">数据经理</div>
<img src="logo.png" />
<div id="two1" class="div_tag1" onmouseout="myClickhide('two2')" onmouseover="myClickshow('two2')">
<div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</div>
<div class="div_meau2">Java</div>
<div class="div_meau2">PHP</div>
<div class="div_meau2">C++</div>
<div class="div_meau2">C#</div>
<div class="div_meau2">数据挖掘</div>
<div id="two2" class="div_tag2">
<div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</div>
<div class="div_meau2">Java</div>
<div class="div_meau2">PHP</div>
<div class="div_meau2">C++</div>
<div class="div_meau2">C#</div>
<div class="div_meau2">数据挖掘</div>
</div>
</div>
</div>
<div class="div_in2" onmouseout="myClickhide('thr1')" onmouseover="myClickshow('thr1')">
<div class="div_meau1">设计</div>
<div class="div_meau2">UI设计师</div>
<div class="div_meau2">交互设计</div>
<div class="div_meau2" style="margin:0px;">网页设计</div>
<img src="logo.png" />
<div id="thr1" class="div_tag1" onmouseout="myClickhide('thr2')" onmouseover="myClickshow('thr2')">
<div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</div>
<div class="div_meau2">Java</div>
<div class="div_meau2">PHP</div>
<div class="div_meau2">C++</div>
<div class="div_meau2">C#</div>
<div class="div_meau2">数据挖掘</div>
<div id="thr2" class="div_tag2">
<div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</div>
<div class="div_meau2">Java</div>
<div class="div_meau2">PHP</div>
<div class="div_meau2">C++</div>
<div class="div_meau2">C#</div>
<div class="div_meau2">数据挖掘</div>
</div>
</div>
</div>
</div>
</body>
</html>再看一下实现的效果图:
