精华内容
下载资源
问答
  • js鼠标悬浮事件
    千次阅读
    2019-04-26 18:41:02

    //仅供参考(与layui前端框架配合使用)

    $(function(){

        createModelAllLayer();

        wbgraphicsOnMouseOut();

    });

    /**
     * 用于轨迹鼠标悬浮事件
     */

    var wbnpTtNum,wbnpTtArray;
    function wbgraphicsOnMouseOut(){

    var modelAllLayer=map.getLayer("modelAllLayer");
        var wbnplayerConnect=dojo.connect(modelAllLayer, "onMouseMove", function(evt) {
            var g = evt.graphic;
            if(wbnpTtNum==g.attributes.id){
                if(tipsClose<=0){
                    //轨迹鼠标悬浮展示层【layui】
                    showTrajectoryTips(wbnpTtArray,evt.target);
                }
                return true;
            }
            var id=g.attributes.id;
            //遍历图层获取需要展示的数组数据
            wbnpTtArray=querywbnpDates(id);
            wbnpTtNum=id;//将序号传给wbnpTtNum
            //轨迹鼠标悬浮展示层【layui】
            showTrajectoryTips(wbnpTtArray,evt.target);
        });
        
        //dojo.disconnect(wbnplayerConnect);//移除图层的监听事件 
    }
    /**
     * 轨迹鼠标悬浮之获取graphic信息(包含重复叠加的graphic)
     */
    function querywbnpDates(id){
        var graphics=modelAllLayer.graphics;
        var array=new Array(),a=0;
        for(var i=0;i<graphics.length;i++){
            var gid=graphics[i].attributes.id;
            if(id==gid){
                array[a]={
                    "name":graphics[i].attributes.wbname
                };
                a++;
            }
        }
        return array;
    }

    var tipsClose;

    /**
     * 轨迹鼠标悬浮之展示层【layui】
     */
    function showTrajectoryTips(array,target){
        var str="<div>";
        for(var a=0;a<array.length;a++){
            str+="<p>"+array[a].name+"</p>";
        }
        str+="</div>";
        tipsClose=layer.tips(str, target, {
            tips: [1, '#3595CC'],
            area: ['350px', 'auto'],
            time: 0//tips一直存在
        });
    }

    /**
     * 创建图层和鼠标移出事件
     */
    function createModelAllLayer(){
        //创建一键搜索图层
        var layerid="modelAllLayer";
        modelAllLayer = new esri.layers.GraphicsLayer();
        modelAllLayer.id=layerid;
        map.addLayer(modelAllLayer);
        //鼠标移出事件,用于鼠标悬浮tips展示
        dojo.connect(modelAllLayer, "onMouseOut", function(evt) {
            if(tipsClose && tipsClose>0){
                layer.close(tipsClose);
                tipsClose=0;
            }
        });
    }

    更多相关内容
  • 鼠标悬停事件是当鼠标的光标与其名称表示的元素重叠时触发的事件,本篇文章我们就来详细介绍一下JavaScript鼠标悬停事件的用法。 我们先来看一下什么是onmouseover? 鼠标悬停的活动是“事件”,而onmouseover是...
  • 主要介绍了echarts 使用formatter 修改鼠标悬浮事件信息操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • JavaScript的DOM之鼠标悬浮事件

    千次阅读 2021-04-21 16:23:13
    JS的DOM之鼠标悬浮事件 鼠标悬浮事件之onmouseover()和onmouseout()事件 这里用大白话介绍一下最简单的原理: 就是当鼠标在这块区域时候会触发相应事件,将鼠标挪开则恢复原先事件 附上代码 <!DOCTYPE html> &...

    JS的DOM之鼠标悬浮事件
    鼠标悬浮事件之onmouseover()和onmouseout()事件

    这里用大白话介绍一下最简单的原理:
    就是当鼠标在这块区域时候会触发相应事件,将鼠标挪开则恢复原先事件
    附上代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>鼠标悬浮事件onmouseover()和onmouseout()事件</title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <script type="text/javascript">
            // 1.找开关   2.摁一下  3.灯亮了
    
            // 1.找到触发的事件对象   3.事件处理程序
            var oDiv = document.getElementById("box");
    
            // 鼠标划过事件
            oDiv.onmouseover = function (){
                // 3.事件处理程序
                this.style.backgroundColor = "green";
            }
    
            // 鼠标移开事件
            oDiv.onmouseout = function (){
                // 3.事件处理程序
                this.style.backgroundColor = "red";
            }
    
        </script>
    </body>
    </html>
    

    这个是网页鼠标未悬浮时的样子
    在这里插入图片描述

    这个是鼠标在框内悬浮的样子
    在这里插入图片描述

    展开全文
  • 其实我想实现的只是大图预览,不需要太复杂。后来,在原来有的javascript资料里找到这个:)“JavaScript网页设计300例.chm”,从里面找到了类似的下拉菜单的例子修改了一下,以实现这个功能。
  • 该事件属于悬浮事件 改代码逻辑非常简单,主要是 当鼠标移动到按钮上显示一个盒子,移开之后盒子隐藏 JavaScript事件中  onmouseover 代表的是鼠标指针移动到指定的对象上时发生某个动作;  onmouseout 代表...

     今天给大家分享一个简单的JavaScript事件案例:

    该事件属于悬浮事件

    改代码逻辑非常简单,主要是 当鼠标移动到按钮上显示一个盒子,移开之后盒子隐藏

    JavaScript事件中

        onmouseover 代表的是鼠标指针移动到指定的对象上时发生某个动作;

        onmouseout   代表的是鼠标指针移出该指定的对象上时发生某个动作;

    xxxx.style 代表一个单独的样式声明

    display 是个属性 意为展示或显示的意思

         |---  block 以块级元素显示

         |--- none  不予以显示,可理解为隐藏

    更多具体的属性值可以查看http://www.w3school.com.cn/cssref/pr_class_display.asp

    源代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    	<title>鼠标移入移出显示或隐藏的悬浮事件</title>
    	<style>
    	div{
    		width: 200px;
    		height: 100px;
    		background:#ccc;
    		border:1px solid #000;
    		display:none;
    	}
    	</style>
    </head>
    <body>
    	<button id="btn">移动鼠标到按钮会有盒子显示或隐藏</button>
    	<div id="box"></div>
    </body>
    </html>
    <script>
    	//1.获取标签元素
    	var oBtn=document.getElementById('btn');
    	var oBox=document.getElementById('box');
    
    	//2.书写事件
    	oBtn.onmouseover=function(){
    		//alert('ok');
    		oBox.style.display='block';
    	}
    	oBtn.onmouseout=function(){
    		oBox.style.display='none';
    	}
    </script>

    效果图如下:

     

     

     

     

     


    作者: 杨校

    出处: https://blog.csdn.net/kese7952

    分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。

    本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 如有问题, 可邮件(397583050@qq.com)咨询。
     

     

    展开全文
  • 1、任务:实现在水果库存表中鼠标悬浮时该行背景颜色改变,鼠标离开后恢复原状,且鼠标悬浮在单价单元格出鼠标箭头表为手势。 html代码: <html> <head> <meta charset="uf-8"> <link ...

    1、任务:实现在水果库存表中鼠标悬浮时该行背景颜色改变,鼠标离开后恢复原状,且鼠标悬浮在单价单元格出鼠标箭头表为手势。

    html代码:

    <html>
     <head>
      <meta charset="uf-8">
       <link rel="stylesheet" href="css/demo02.css">
       <script type="text/javascript" src="js/demo01.js"></script>
     </head>
     <body>
       <div id="div_container">
        <div id="div_fruit_list">
    	 <table id="tbl_fruit">
    	  <tr>
    	   <th class="w20">名称</th>
    	   <th class="w20">单价</th>
    	   <th class="w20">数量</th>
    	   <th class="w20">小计</th>
    	   <th>操作</th>
    	  </tr>
    	  <tr>
    	   <td>苹果</td>
    	   <td>5</td>
    	   <td>20</td>
    	   <td>100</td>
    	   <td><img src="img/67a33f27_E773381_b27076b6.png" class="delImg"></td>
    	  </tr>
    	   <tr>
    	   <td>菠萝</td>
    	   <td>4</td>
    	   <td>25</td>
    	   <td>100</td>
    	   <td><img src="img/67a33f27_E773381_b27076b6.png" class="delImg"></td>
    	  </tr>
           <tr>
    	   <td>榴莲</td>
    	   <td>3</td>
    	   <td>30</td>
    	   <td>90</td>
    	   <td><img src="img/67a33f27_E773381_b27076b6.png" class="delImg"></td>
    	  </tr>
    	  <tr>
    	   <td>总计</td>
    	   <td colspan="4">999</td>
    	  </tr>
    	 </table>
    	</div>
       </div>
      </body>
    </html>
    
    
    

    css代码:

    body{
       margin:0;
       padding:0;
       background-color:#808080;
    }
    div{
       position:relative;
       float:left;
    }
    #div_container{
       width:80%;
       height:100%;
       border:0px solid blue;
       margin-left:10%;
       float:left;
       background-color:honeydew;
       border-radius:8px;
    }
    #div_fruit_list{
       width:100%;
       border:0px solid red;
    }
    #tbl_fruit{
       width:60%;
       line-height:28px;
       margin-top:120px;
       margin-left:20%;
    }
    #tbl_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{
       border:1px solid gray;
       border-collapse:collapse;
       text-align:center;
       font-size:16px;
       font-family:"黑体";
       font-weight:lighter;
       color:threeddarkshadow;
    }
    .w20{
       width:20%;
    }
    .delImg{
       width:24px;
       height:24px;
    }

    js代码:

    window.onload=function(){
    //当页面加载完毕我们需要绑定各种事件
    //根据id获取到表格
       var fruitTbl=document.getElementById("tbl_fruit");
    //获取表格中的所有行
       var rows=fruitTbl.rows;
       for(var i=0;i<rows.length;i++){
    	   var tr=rows[i];
    //1、绑定鼠标悬浮以及离开时设置背景颜色事件
           tr.onmouseover=showBGColor;
    	   tr.onmouseout=clearBGColor;
    //获取tr这一行的所有单元格
           var cells=tr.cells;
    	   var priceTD=cell[i];
    //2、绑定鼠标悬浮在单价单元格变手势的事件
           priceTD.onmouseover=showHand;
       }
    }
    
    //当鼠标悬浮时显示背景颜色
    function showBGColor(){
    //event:当前发生的事件
    //event.srcElement:事件源
    //alert(event.srcElement.tagName);---->获取TD
         if(event && event.srcElement && event.srcElement.tagName=="TD"){
    		 var td=event.srcElement;
    //td.parentElement 表示获取的td的父元素---->TR
             var tr=td.parentElement;
    //如果想要通过js的代码设置某节点的样式,则需要加上.style
             tr.style.backgroundColor="navy";
    //tr.cells 表示获取这个tr中的所有单元格
             var tds=tr.cells;
    		 for(var i=0;i<tds.length;i++){
    			 tds[i].style.color="white";
    		 }
    	 }
    }
    
    //当鼠标离开时恢复原始的样式
    function celarBGColor(){
    	if(event && event.srcElement && event.srcElement.tagName=="TD"){
    		var td=event.srcElement;
    		var tr=td.parentElement;
    		tr.style.backgroundColor="transparent";
    		var tds=tr.cells;
    		for(var i=0;i<tds.length;i++){
    			tds[i].style.color="threeddarkshadow";
    		}
    	}
    }
    
    //当鼠标悬浮在单价单元格时,显示手势
    function showHand(){
    	if(event && event.srcElement && event.srcElement.tagName=="TD"){
    		var td=event.srcElement;
    //cursor:光标
            td.style.cursor="hand";
    	}
    }
    
    
    	
    
    

    效果:

     2、关于window对象

    代表浏览器中一个打开的窗口;

    对象描述
    clientInfermation包含关于web浏览器的信息
    clipboardData提供了对于预定义的剪贴板格式的访问,以便在编辑器操作中使用
    document代表给定浏览器窗口中的HTML文档
    event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态
    external允许访问由Microsoft Internet Exploror浏览器组件寄主应用程序提供的附加对象模型
    history包含了用户已浏览的URL信息
    location包含关于当前URL的信息
    navigator包含关于web浏览器的信息
    screen包含关于客户屏幕和渲染能力的信息

    完结

    展开全文
  • JS事件鼠标悬浮窗(鼠标悬浮窗抖动问题的解决)
  • js实现鼠标悬停事件

    千次阅读 2022-04-09 17:57:52
    介绍:把鼠标放在选择框上实现文字浮现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个JS</title> <style> #div1 { width: 100...
  • jQuery鼠标悬浮事件

    千次阅读 2020-12-10 23:39:16
    今天学习了鼠标悬浮事件,跟小编来看看吧~ 先来看一下效果: 原本样式: 鼠标悬浮样式: 鼠标离开样式: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...
  • 很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果。 代码实例如下: &...
  • js制作的鼠标悬浮时产生的下拉框效果,需要的朋友可以参考下
  • 主要为大家详细介绍了Vue.js实现鼠标悬浮更换图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮。 效果如下: 问题: 在DIV hover时候将按钮设为display: block,这是很直接的想法,但是这有个问题,就是在悬浮出现按钮后,鼠标要...
  • 主要介绍了js鼠标悬浮出现遮罩层的方法,以实例形式较为详细的分析了html及css页面布局与js特效的实现方法,是非常实用的技巧,需要的朋友可以参考下
  • 原生JS实现鼠标悬浮菜单栏

    千次阅读 2020-05-09 15:24:14
    今天在工作中需要用原生JS实现一个鼠标悬浮菜单栏,记录一下。 效果图 代码实现 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport...
  • 鼠标悬浮事件如上图,下拉选项需要鼠标悬浮在"一站培训",才会出现。下面简单介绍下,鼠标悬浮事件用法:栗子:鼠标悬浮"一站培训",并点击进入"微专业"具体写法如下:# 导入ActionChainsfrom selenium.webdriver....
  • JS代码实现两种方式的鼠标悬停与离开
  • js动态渲染的页面发现鼠标悬浮hover事件失效 在开发上,页面是通过调用ajax调用生成的HTML元素节点,发现鼠标悬浮hover事件失效了 $(function(){ $.ajax({ type:'post', url:ctx+'hbk/task/allTaskBefore...
  • 主要实现功能:引用模型进行展示,使用精灵Sprite作为标签,鼠标悬浮精灵上时变小手。 效果图如下: 2,主要说明 使用精灵Sprite作为标签,SpriteMaterial作为材质,使用精灵作为标签,就需要把精灵对象插入...
  • 主要介绍了js实现鼠标悬浮给图片加边框的方法,涉及jquery.insetborder.js中borderEffect方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • js鼠标悬浮显示详细内容

    热门讨论 2010-12-21 16:02:29
    js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容
  • js 实现鼠标悬浮提示

    千次阅读 2020-07-22 18:14:53
    第一种:title 给元素增加title属性 第二种:增加监听事件 $(".table1").on(“mouseover”, ‘.txt’, function () { 鼠标悬浮逻辑 })
  • 鼠标悬浮事件 -jQuery hover()方法

    万次阅读 2016-09-14 18:25:08
    js代码 <script type="text/javascript"> var differentindex = 999; $(document).ready(function(){ $(".name").hover(function() { openMsg(); }, function() { la
  • 前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon文字不好描述,因为是web端录屏也比较麻烦 这里用截图说明学习之路 永无止步记录当下,...
  • Vue.js鼠标悬浮切换图片
  • 效果: 鼠标放到图片上图片变化 代码: <!DOCTYPE html> <...作业5-mouse事件<...script src="utility.js" type="text/javascript" charset="utf-8"></script> </head> <body&

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,733
精华内容 5,893
关键字:

js鼠标悬浮事件