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
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 ...
随机推荐
- 跨域访问CORS
由于现代浏览器的同源策略,合理的跨域请求也变得至关重要. CORS(Cross-Origin Resource Sharing,跨域资源共享)定义了在必须访问跨域资源时,浏览器与服务器应该如何沟通.它 ...
- 用php怎么改文件名
php手册:bool rename ( string oldname, string newname [, resource context] )尝试把 oldname 重命名为 newname. 如 ...
- jenkins：通过execute shell启动的进程会被杀死的问题
[问题]在jenkins中配置自动更新部署项目时,如果采取用execute shell启动/关闭tomcat,会发现可以进行关闭tomcat,但是无法启动tomcat,虽然构建会显示执行成功,但是查看 ...
- CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）
http://www.52css.com/article.asp?id=602 =================================================== html ...
- windowsxp设置开机不需密码，但是锁定后打开需要密码
方法一: 1.先设置好密码2.设置不输入密码自动登陆系统 在cmd下运行rundll32 netplwiz.dll,UsersRunDll,在打开的窗口中,取消“要使用本机,用户必须输入用户名和密码” ...
- __thread关键字[转]
自 http://blog.csdn.net/liuxuejiang158blog/article/details/14100897 __thread是GCC内置的线程局部存储设施,存取效率可以和全局 ...
- nginx缓存引发的问题
请求为f.chinasoft.com/file f.chinasoft.com 域名指向slb(3.3.3.3) 业务方式: ios-->slb(3.3.3.3)-->ecs集群(每一台e ...
- 解决openssl: error while loading shared libraries: libssl.so.1.1: cannot open shared object file: No such file or directory错误
问题 在Centos7上编译安装openssl后,运行openssl version出现如下错误: openssl: error while loading shared libraries: lib ...
- spark配置lzo
spark1.0版本 spark-env.sh中 export SPARK_LIBRARY_PATH=$SPARK_LIBRARY_PATH:/soft/hadoop/lzo/lib/export S ...
- Java入门记(五)：容器关系的梳理（下）——Map
注意:阅读本文及相关源码时,需要数据结构相关知识,包括:哈希表.链表.红黑树. Map是将键(key)映射到值(value)的对象.不同的映射不能包含相同的键:每个键最多只能映射到一个值.下图是常见M ...