该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码。
<!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鼠标移入,移出事件的更多相关文章
-
js鼠标移入移出事件会被子元素触发解决方法
问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.
-
js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
-
Vue 鼠标移入移出事件
Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style 现在开始代码示例 <template> <div class="pc&qu ...
-
js鼠标移入移出效果【原】
<HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...
-
Qt 为QPushButton、QLabel添加鼠标移入移出事件
QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...
-
JS添加、设置属性以及鼠标移入移出事件
源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
-
Javascript和jquery事件-鼠标移入移出事件
javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...
-
javascript父级鼠标移入移出事件中的子集影响父级的处理方法
一.我们先分析其产生的原因: 1.当鼠标从父级移入子集时触发了父级的两个事件:a.父级的mouseout事件(父级离开到子集):b.由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级 ...
-
为EasyUI的dataGrid单元格增加鼠标移入移出事件
onLoadSuccess: function (data) { $(".datagrid-row").mouseover(function (e) { var text = $( ...
-
jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout
hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...
随机推荐
-
ios开发中遇到的编译错误总结
1:Undefined symbols for architecture arm64: ? 1 2 3 <code>Undefined symbols for architecture a ...
-
ASP.NET缓存OutputCache和Response.Cache之C#后台设置
一.ASPX页面缓存页面缓存的使用方法非常的简单,只需要在aspx页的顶部加一句声明<%@ OutputCache Duration="60" VaryByParam=&qu ...
-
SQL SERVER 存储过程基础
一.注释 -- 单行注释,从这到本行结束为注释,类似C++,c#中// /* … */ 多行注释,类似C++,C#中/* … */ 二.变量 (int, smallint, tinyint, deci ...
-
python中如何用sys.excepthook来对全局异常进行捕获、显示及输出到error日志中
使用sys.excepthook函数进行全局异常的获取. 1. 使用MessageDialog实现异常显示: 2. 使用logger把捕获的异常信息输出到日志中: 步骤:定义异常处理函数, 并使用该函 ...
-
orakill和ALTER SYSTEM KILL SESSION详解
--orakill和ALTER SYSTEM KILL SESSION详解[转]-----------------------------------------2013/11/05 一个用户进程偶尔 ...
-
非极大值抑制(Non-Maximum Suppression,NMS)
概述 非极大值抑制(Non-Maximum Suppression,NMS),顾名思义就是抑制不是极大值的元素,可以理解为局部最大搜索.这个局部代表的是一个邻域,邻域有两个参数可变,一是邻域的维数,二 ...
-
深入理解java虚拟机----->;垃圾收集器与内存分配策略(下)
1. 前言 内存分配与回收策略 JVM堆的结构分析(新生代.老年代.永久代) 对象优先在Eden分配 大对象直接进入老年代 长期存活的对象将进入老年代 动态对象年龄判定 空间分配担保 2. 垃圾 ...
-
jQuery和Vue的区别
1.jQuery和Vue的区别 jQuery是使用选择器($)选取DOM对象,对其进行赋值.取值.事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起 ...
-
关于elment-ui树形控件Tree的使用
如果简单使用的tree树形控件,按照Element ui Tree 树形控件 官方文档使用即可,基本上能够完成大部分的需求. 但是如果需要对树形结构进行额外操作,仅仅根据官方文档提供的方案的话,可能就 ...
-
mysql count group by统计条数方法
mysql count group by统计条数方法 mysql 分组之后如何统计记录条数? gourp by 之后的 count,把group by查询结果当成一个表再count一次select c ...