JS鼠标移入，移出事件
2017-04-01 11:12
381 查看
该事件的效果就像百度首页的设置选项，当鼠标移入，移出时的效果，废话不多说了，直接上码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度</title>
<style type="text/css">·····························································一下是CSS
#wrap{
width: 150px;height: 200px;
/*background: rgb(211,211,211);*/
margin: 200px auto 0px;
text-align: center;
position: relative;
background: rgb(225,225,225);
}
a{
color:white;
display: inline-block;
width: 150px;height: 20px;
}
.one{
position: absolute;
left: 70px;top: 14px;
color: white;
}
#div1{
width: 80px;height:81px;
margin: 3px auto 0px;
background: white;
}
#div1 a{
display: inline-block;
width:78px;
height: 25px;
color:black;
font-size: 15px;
line-height: 25px;
text-decoration: none;
position: relative;
margin: 1px 1px;
z-index: 1;
}
</style>
</head>
<body>
<div id="wrap">·············································································HTML内容
<a href="#" id="set">设置</a>
<span class="one">♦</span>
<div id="div1">
<a href="#" class="two">搜索设置</a>
<a href="#" class="two">高级搜索</a>
<a href="#" class="two">搜索历史</a>
</div>
</div>
<script type="text/javascript">······································································一下是JS
var set = document.getElementById('set');
var div1 = document.getElementById('div1');
var one = document.getElementsByClassName('one');
var two = document.getElementsByClassName('two');
one[0].style.display = 'none';
div1.style.display = 'none';
set.onmouseover = function (){
one[0].style.display = 'block';
div1.style.display = 'block';
}
set.onmouseout = function (){
one[0].style.display = 'none';
div1.style.display = 'none';
}
two[0].onmouseover = function(){
two[0].style.background = 'rgb(57,139,251)';
}
two[1].onmouseover = function(){
two[1].style.background = 'rgb(57,139,251)';
}
two[2].onmouseover = function(){
two[2].style.background = 'rgb(57,139,251)';
}
two[0].onmouseout = function(){
two[0].style.background = 'white';
}
two[1].onmouseout = function(){
two[1].style.background = 'white';
}
two[2].onmouseout = function(){
two[2].style.background = 'white';
}
div1.onmouseover = function(){
one[0].style.display = 'block';
div1.style.display = 'block';
}
div1.onmouseout = function(){
one[0].style.display = 'none';
div1.style.display = 'none';
}
one[0].onmouseover = function(){
one[0].style.display = 'block';
div1.style.display = 'block';
}
one[0].onmouseout = function(){
one[0].style.display = 'none';
div1.style.display = 'none';
}
</script>
</body>
</html>
进入页面时的效果是这样的：
当鼠标移入设置上时，效果是这样的：
当鼠标移入下面的选项的时候，背景颜色会变成蓝色：
到鼠标移出设置或下面的3个选项时，页面就如第一张图所示。
以上是JS写法，下面是JQ的写法
JQ的鼠标移入移出事件可以用两个函数写，亦可以用一个函数写：
1、var a = $("#wrap");
a.on（"mouseover",function(){"鼠标移入时想要的效果"}）；
a.on("mouseout",function(){"鼠标移出事想要的效果"})；
2、这一种方法类似于css中的hover效果，相对比而言更简单一点：
var a = $("#wrap");
a.hover(function(){"鼠标移入的效果"},function(){“鼠标移出时的效果”})；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度</title>
<style type="text/css">·····························································一下是CSS
#wrap{
width: 150px;height: 200px;
/*background: rgb(211,211,211);*/
margin: 200px auto 0px;
text-align: center;
position: relative;
background: rgb(225,225,225);
}
a{
color:white;
display: inline-block;
width: 150px;height: 20px;
}
.one{
position: absolute;
left: 70px;top: 14px;
color: white;
}
#div1{
width: 80px;height:81px;
margin: 3px auto 0px;
background: white;
}
#div1 a{
display: inline-block;
width:78px;
height: 25px;
color:black;
font-size: 15px;
line-height: 25px;
text-decoration: none;
position: relative;
margin: 1px 1px;
z-index: 1;
}
</style>
</head>
<body>
<div id="wrap">·············································································HTML内容
<a href="#" id="set">设置</a>
<span class="one">♦</span>
<div id="div1">
<a href="#" class="two">搜索设置</a>
<a href="#" class="two">高级搜索</a>
<a href="#" class="two">搜索历史</a>
</div>
</div>
<script type="text/javascript">······································································一下是JS
var set = document.getElementById('set');
var div1 = document.getElementById('div1');
var one = document.getElementsByClassName('one');
var two = document.getElementsByClassName('two');
one[0].style.display = 'none';
div1.style.display = 'none';
set.onmouseover = function (){
one[0].style.display = 'block';
div1.style.display = 'block';
}
set.onmouseout = function (){
one[0].style.display = 'none';
div1.style.display = 'none';
}
two[0].onmouseover = function(){
two[0].style.background = 'rgb(57,139,251)';
}
two[1].onmouseover = function(){
two[1].style.background = 'rgb(57,139,251)';
}
two[2].onmouseover = function(){
two[2].style.background = 'rgb(57,139,251)';
}
two[0].onmouseout = function(){
two[0].style.background = 'white';
}
two[1].onmouseout = function(){
two[1].style.background = 'white';
}
two[2].onmouseout = function(){
two[2].style.background = 'white';
}
div1.onmouseover = function(){
one[0].style.display = 'block';
div1.style.display = 'block';
}
div1.onmouseout = function(){
one[0].style.display = 'none';
div1.style.display = 'none';
}
one[0].onmouseover = function(){
one[0].style.display = 'block';
div1.style.display = 'block';
}
one[0].onmouseout = function(){
one[0].style.display = 'none';
div1.style.display = 'none';
}
</script>
</body>
</html>
进入页面时的效果是这样的：
当鼠标移入设置上时，效果是这样的：
当鼠标移入下面的选项的时候，背景颜色会变成蓝色：
到鼠标移出设置或下面的3个选项时，页面就如第一张图所示。
以上是JS写法，下面是JQ的写法
JQ的鼠标移入移出事件可以用两个函数写，亦可以用一个函数写：
1、var a = $("#wrap");
a.on（"mouseover",function(){"鼠标移入时想要的效果"}）；
a.on("mouseout",function(){"鼠标移出事想要的效果"})；
2、这一种方法类似于css中的hover效果，相对比而言更简单一点：
var a = $("#wrap");
a.hover(function(){"鼠标移入的效果"},function(){“鼠标移出时的效果”})；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js鼠标移入移出事件
- 网页基础第4课之“简单的JS与CSS结合--鼠标移入移出事件”
- js鼠标移入移出事件样例
- 初学JS值之用JS实现鼠标移入移出事件
- JS之鼠标移入移出事件2
- js的面向对象（实现鼠标移入移出右下角出现备注）
- 鼠标移入移出事件改变图片的分辨率的两种方法
- js实现鼠标的移入移出控制图片的明暗显示
- 鼠标移入移出事件图片更换
- Ferris教程学习笔记:js示例2.4 鼠标移入改变样式，鼠标移出恢复
- js控制鼠标事件移动及移出效果显示
- js判断鼠标移入移出方向
- jQuery事件-div的显示隐藏及鼠标的移入移出
- MFC鼠标移入移出事件
- JS动画——制作鼠标移入移出的时候控件属性的变化
- JS控制鼠标在移入移出时，图片渐变的效果
- jQuery事件-div的显示隐藏及鼠标的移入移出
- 鼠标移入移出事件改变图片的分辨率
- 鼠标移入移出事件改变图片的分辨率
- 鼠标移入移出事件改变图片的分辨率的两种方法