JS鼠标移入，移出事件

该事件的效果就像百度首页的设置选项，当鼠标移入，移出时的效果，废话不多说了，直接上码。

　　<!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

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鼠标移入，移出事件相关推荐

html鼠标移入移除事件,js鼠标移入移出事件样例
javaScript实例 li{background-color:#eee;height:25px;margin-top:2px;} //添加鼠标移入移出事件 function fun(){ //获取 ...
原生JS鼠标移入移出事件
开发工具与关键技术:DW JavaScript 撰写时间:2019年2月15日在css中可以用伪类hover来实现鼠标的移入移出效果,而在JS中也可以用鼠标移入onmouseover事件和鼠标移出o ...
js 鼠标移入移出事件
var oFlag = document.getElementById('flag'); var oDiv = document.getElementById('node'); //鼠标移入事件 oD ...
js鼠标移入移出事件
2019独角兽企业重金招聘Python工程师标准>>> 转载于:https://my.oschina.net/u/3362233/blog/1535248
jq鼠标移入移出显示和隐藏_jQuery实现鼠标移入移出事件切换功能示例
这篇文章主要介绍了jQuery实现鼠标移入移出事件切换功能,结合实例形式分析了jQuery不同版本处理鼠标事件响应与触发相关操作技巧,需要的朋友可以参考下. jQuery实现鼠标移入移出事件切换功能 ...
js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){$(".weixinTop").show();},function( ...
vue按钮移上去显示提示_vue 鼠标移入移出事件（移入出现按钮），element-ui表格移入移出...
效果图: 注:@mouseenter="enter(index)" @mouseleave="leave()" 重点下载删除 data() { retu ...
鼠标移入移出事件，mouseover、mouseenter区别
简单介绍: js中有两组鼠标移入移出事件:(旧的)mouseover.mouseout与(新的)mouseenter.mouseleave,不建议混着使用. 两者的区别是,新的鼠标移入移出事件,去掉了 ...
web前端开发第二阶段——鼠标移入移出事件
鼠标移入/移出事件 : 鼠标移入 :onmouseenter 鼠标移出 : onmouseleave <!DOCTYPE html> <html> <head>&l ...
JavaScript事件委托之鼠标移入移出事件
鼠标移入移出事件 <div class="parent">父元素<div class="child">子元素</div>&l ...

JS鼠标移入，移出事件

JS鼠标移入，移出事件相关推荐

最新文章

热门文章