onmouseout
在网页浏览中我们可以发现在有些页面的部分当我们鼠标移动到某个板块的时候会发现它弹出一个新的板块并且当鼠标移出后又自动隐藏,是因为在改板块中使用了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>, <p>, <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>, <p>, <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>
.p_in{
width:330px;
height:165px;
}
.p_in2{
width:321px;
height:20px;
padding:18px 0 17px 0;
line-height:22px;
font-size:14px;
border: 1px solid rgb(234, 238, 237);
}
.p_meau1{
display:inline-block;
padding-left:15px;
font-size:18px;
font-weight:500;
padding:0 8px;
}
.p_meau2{
margin:0 5px 5px 0;
padding:0 8px;
display:inline-block;
}
.p_tag1{
width:200px;
height:400px;
margin-top:-50px;
margin-left:322px;
border: 1px solid rgb(234, 238, 237);
display:none;
}
.p_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>
<p class="p_in">
<p class="p_in2" onmouseout="myClickhide('one1')" onmouseover="myClickshow('one1')">
<p class="p_meau1">技术</p>
<p class="p_meau2">Java</p>
<p class="p_meau2">PHP</p>
<p class="p_meau2">C++</p>
<p class="p_meau2" style="margin-left:10px;">区块链</p>
<img src="logo.png" />
<p id="one1" class="p_tag1" onmouseout="myClickhide('one2')" onmouseover="myClickshow('one2')">
<p style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</p>
<p class="p_meau2">Java</p>
<p class="p_meau2">PHP</p>
<p class="p_meau2">C++</p>
<p class="p_meau2">C#</p>
<p class="p_meau2">数据挖掘</p>
<p id="one2" class="p_tag2">
<p style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</p>
<p class="p_meau2">Java</p>
<p class="p_meau2">PHP</p>
<p class="p_meau2">C++</p>
<p class="p_meau2">C#</p>
<p class="p_meau2">数据挖掘</p>
</p>
</p>
</p>
<p class="p_in2" onmouseout="myClickhide('two1')" onmouseover="myClickshow('two1')">
<p class="p_meau1">产品</p>
<p class="p_meau2">产品总监</p>
<p class="p_meau2">产品经理</p>
<p class="p_meau2" style="margin:0px;">数据经理</p>
<img src="logo.png" />
<p id="two1" class="p_tag1" onmouseout="myClickhide('two2')" onmouseover="myClickshow('two2')">
<p style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</p>
<p class="p_meau2">Java</p>
<p class="p_meau2">PHP</p>
<p class="p_meau2">C++</p>
<p class="p_meau2">C#</p>
<p class="p_meau2">数据挖掘</p>
<p id="two2" class="p_tag2">
<p style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</p>
<p class="p_meau2">Java</p>
<p class="p_meau2">PHP</p>
<p class="p_meau2">C++</p>
<p class="p_meau2">C#</p>
<p class="p_meau2">数据挖掘</p>
</p>
</p>
</p>
<p class="p_in2" onmouseout="myClickhide('thr1')" onmouseover="myClickshow('thr1')">
<p class="p_meau1">设计</p>
<p class="p_meau2">UI设计师</p>
<p class="p_meau2">交互设计</p>
<p class="p_meau2" style="margin:0px;">网页设计</p>
<img src="logo.png" />
<p id="thr1" class="p_tag1" onmouseout="myClickhide('thr2')" onmouseover="myClickshow('thr2')">
<p style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</p>
<p class="p_meau2">Java</p>
<p class="p_meau2">PHP</p>
<p class="p_meau2">C++</p>
<p class="p_meau2">C#</p>
<p class="p_meau2">数据挖掘</p>
<p id="thr2" class="p_tag2">
<p style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</p>
<p class="p_meau2">Java</p>
<p class="p_meau2">PHP</p>
<p class="p_meau2">C++</p>
<p class="p_meau2">C#</p>
<p class="p_meau2">数据挖掘</p>
</p>
</p>
</p>
</p>
</body>
</html>
再看一下实现的效果图:
相关阅读
的确，必须没事找事，作为运营，你奏需要这么干。有一些事件我们很有必要熟知，总有一款会启发您。尝试归纳事件营销中具备二次传播基因的
1、主要作用 自动触发控件的点击事件2、界面的布局文件 activity_main.xml<RelativeLayout xmlns:android="http://schemas.and
最近大家都发现一个大问题，B站番剧页面黑白了。那么B站番剧页面黑白是怎么回事，今天小编就来给大家说说B站番剧页面黑白事件吧。7月
Java——事件处理机制监听者基础（一）动作监听ActionList
介绍：ActionListener是一个接口，ActionEvent通常在点击一个按钮或双击某个列表项或选中某个菜单时发生。如何设置监听：对监听者添加A
入口页设置 情景一：小程序初始化页面 根目录下的app.json文件中，控制pages数组，设置在第一行的页面就是默认启动页面例如下面的设置