js鼠标悬停事件

Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件

2020-04-23 20:07:22

Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title...

Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        body {
            background-color: #eeeeee;
        }
        .clearfix {
            clear: both;
        }
        div.title {
            margin-top: 100px;
            margin-left: 300px;
        }
        div.title ul li {
            float: left;
        }

        div.title ul li a {
            display: block;
            height: 30px;
            line-height: 30px;
            background-color: skyblue;
            color: #ffffff;
            padding: 5px 12px;
        }
        div.title ul li a:hover {
            background-color: purple;
        }
        div.content {
            margin-left: 300px;
            background-color: #ffffff;
            width: 342px;
        }
        div.content > div {
            display: none;
        }
        div.content > div:first-child {
            display: none;
        }

    </style>
</head>
<body>
<div class="title">
    <ul>
        <li><a class="title-content" href="#">Java</a></li>
        <li><a class="title-content" href="#">C语言</a></li>
        <li><a class="title-content" href="#">Python</a></li>
        <li><a class="title-content" href="#">PHP</a></li>
        <li><a class="title-content" href="#">Android</a></li>
    </ul>
    <div class="clearfix"></div>
</div>
<div class="content">
    <div class="detail">
        <ul>
            <li><a>Java是一门优秀的语言</a></li>

        </ul>
    </div>
    <div class="detail">
        <ul>
            <li><a>C语言是一门优秀的语言</a></li>

        </ul>
    </div>
    <div class="detail">
        <ul>
            <li><a>Python是一门优秀的语言</a></li>

        </ul>
    </div>
    <div class="detail">
    <ul>
        <li><a>PHP是一门优秀的语言</a></li>

    </ul>
</div>
    <div class="detail">
        <ul>
            <li><a>Android是一门优秀的语言</a></li>

        </ul>
    </div>
</div>
</body>
<script>
    // 根据样式类名，或者dom节点，返回的是数组，因为很多dom节点的class样式一样
    var titles = document.getElementsByClassName('title-content');

    // var arr = [34, 45];

    // 详情信息
    var details = document.getElementsByClassName('detail');

    for(var i = 0; i < titles.length; i++) {
        var title = titles[i];
        // 给每个title人为加个属性, 将每一次遍历的值，赋值给title新添加的属性
        title.n=i;
        // 鼠标悬停事件绑定, 但是没有执行, 真正取i的值的时候，是执行事件的时候
        title.onmouseover = function() {
            var ind = this.n;  // 获取到当前鼠标悬停的title的索引

            for(var j = 0; j < details.length; j++) {
                // 让与title对应的新闻详情显示, 索引相同就对应上了
                if(ind == j) {
                    details[j].style.display = 'block';
                }else { // 将其他的隐藏
                    details[j].style.display = 'none';
                }
            }
        };
        // title.onblur=function () {
        //
        //     var inds = this.n;
        //     for (var o =0;o<details.length;o++){
        //
        //         if (inds==false){
        //             details[o].style.display='none';
        //
        //
        //         }else{
        //             details[o].style.display='block';
        //
        //         }
        //
        //
        //     }


        // }

        //console.log(i)
    }

    function onmouseover(obj) {


    }


</script>
</html>

jquery实现：https://blog.csdn.net/weixin_44657829/article/details/106043946

html实现：https://blog.csdn.net/weixin_44657829/article/details/105326856

收起

展开全文

javascript html

js鼠标悬停事件_鼠标悬停出现提示信息怎么做

2020-12-03 14:40:40

概述–提示：指启示，提起...下图为批注方式：另外，在网页设计中也常常看到同样功能，常见的帮助提示框（tips），鼠标悬停在帮助图标上时，显示所有的帮助信息。也不难，几行 JS 脚本的事儿。润乾报表支持在 Web ...

概述
–
提示：指启示，提起注意或给予提醒和解释。
在 excel 中会经常用到给某个格子增加提醒信息，比如金额提示输入数值或最大长度值等等。设置方式也有多种，简单的，仅为单元格插入批注就可以了，也有复杂的有效性验证方式。下图为批注方式：
另外，在网页设计中也常常看到同样功能，常见的帮助提示框（tips），鼠标悬停在帮助图标上时，显示所有的帮助信息。也不难，几行 JS 脚本的事儿。
润乾报表支持在 Web 发布，衣食父母们同样希望产品具备鼠标移动到某个位置时显示一些提示信息的功能。
润乾想客户之所想，不仅支持静态信息，也允许开发者设置动态提示信息（一个单元格，可根据条件判断显示不同信息）。
今天先入个门，介绍一下静态信息的设置方法，后续在结合合适场景介绍动态提示。
Ok！开始进入正题，润乾报表怎么设置静态提示信息呢？ 以“工资单”为例，多数人不清楚其中的考勤扣除怎么算，这里便可以为“考勤扣除”设置提示。
操作步骤
准备工资条报表模板
准备一张结果如下图所示的网格式报表
模板设计如下
注意：该例子目的是为标题字段增加提示，所以不考虑数据来源问题，第三行的数据均为固定数值。
模板中设置静态信息提示（WEB–提示）
在模板中选中 E2，属性区“WEB”—“提示”—“值”编辑框
预览报表结果
提示仅在 web 端有效，所以先发布报表，浏览器预览，当鼠标悬停在“考勤扣除”时效果如下
通过设置单元格提示，轻松做到鼠标悬停的提醒功能。如同强制分页、动态背景色等小技巧一样，针对这种比较常用的功能，报表工具在设计时都已考虑到。遇到类似问题依然建议查阅手册，对应设置即可。
另外，在后续的文章中，会结合相应场景介绍动态提示信息的设置方法，敬请关注。。。
更多前端展现效果的相关问题请查看：前端效果相关问题分类导航
* web 报表轻松实现数据异常预警功能
* 报表实时刷新显示时间
* 报表工具如何实现“点击查看原图”
* 润乾报表中进度条的一种实现方式
* 报表怎样实现滚动的公告效果？
* HTML 事件 – 鼠标移入高亮显示
* 点击表头切换升降序排序方式

收起

展开全文

js鼠标移入移出

js——设置鼠标悬停事件

万次阅读 2019-06-06 17:24:51

鼠标悬停前后 function HoverAndMouseout(){ $(".zhangjie").hover( function () { $(this).css({ "width": "500px" });//移上宽度变为500 }); $(".zhang...



鼠标悬停前后

function HoverAndMouseout(){
	$(".zhangjie").hover(
                function () {
                    $(this).css({ "width": "500px" });//移上宽度变为500
                });
            $(".zhangjie").mouseout(
                function () {
                    $(this).css({ "width": "170px" });//移开还原
                });
       }

收起

展开全文

JS小技巧：鼠标悬停事件

2019-11-15 15:14:55

可以看到鼠标悬停在不同的标题上时，下方的图片会产生相应变换代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *...

简单的JS悬停图片变换

不多bb先看效果图


可以看到鼠标悬停在不同的标题上时，下方的图片会产生相应变换

代码如下
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			body,
			html {
				width: 100%;
				height: 100%;
			}
			
			#box {
				width: 730px;
				height: 335px;
				background-color: #ffcccc;
				margin: 250px auto 0 auto;
			}
			
			.top {
				position: absolute;
				list-style: none;
				cursor: pointer;
			}
			
			li {
				float: left;
				width: 182.5px;
				height: 44px;
				line-height: 44px;
				text-align: center;
				cursor: pointer;
				font-size: 18px;
				background: rgba(255,255,255,0.5);
			}
			li.active{
				background: rgba(255,255,255,0);
				color: white;
			}
			.bg{
				width: 730px;
				height: 335px;
				background: url(../img/0.jpg);
			}
		</style>
	</head>

	<body>
		<div id="box">
			<ul class="top">
				<li class="active">新流派龙吟</li>
				<li>红尘羁绊</li>
				<li>区域链赋能</li>
				<li>会呼吸的江湖</li>
			</ul>
			<div class="bg"></div>
		</div>
		<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
		<script>
			$('#box .top li').hover(function ni(){
				$(this).addClass('active').siblings().removeClass('active');
				$('.bg').css('background-image','url(../img/'+$(this).index()+'.jpg)')
			})
		</script>
	</body>
</html>


注意在script当中的$选择选择器是中间用" "隔开，最重要的一点：图片的路径是连续的，看清楚路径不然加载不了图片
如需原图QQ3054718283

收起

展开全文

鼠标悬停事件_【CSS】鼠标悬停tips的实现
2020-12-17 01:02:07
前端校招互助第三次群内讨论议题：鼠标悬停tips的实现讨论的题目实现一个鼠标悬停出现工具提示的效果讨论区地址：https://www.yuque.com/kuwu/vgfxx6/mcuso8实现的案例https://jsbin.com/nevujitewi/1/edit?html,css...
收起
用js给div添加鼠标悬停事件
万次阅读 2014-02-20 11:27:16
新任务:给表格上的某列添加鼠标悬浮事件但是表格是由omGrid生成的,无法修改所以只能先获取,再添加事件先用firebug看清表格结构: 是div class="innerCo1 " class还是有空格的,为此还纠结了下.. js代码: var obj =...
收起
web自动化之鼠标悬停事件
千次阅读 2019-05-31 22:51:02
前言：我们在操作浏览器的时候，都需要一些鼠标悬停才能显示的下拉框或者选择下拉框的内容。鼠标操作类是 ActionChains 鼠标事件有：　1. 悬浮 - 用的最多最多 move_to_element 　2. 右键 context_click 　3. 点击...
收起
jtopo鼠标悬停事件与画线操作的冲突
2020-01-11 15:24:22
在官方文档中看到鼠标悬停事件有，mouseover和mouseout，我就象征性的写进代码里，但是问题出来了，悬停事件和点击画线操作产生了冲突，只要悬停，就不能画线，只要画线，就不能悬停，后来我将悬停的代码写进了jtopo...
收起
jtopo
前台JS：通过Hover（鼠标悬停事件）动态悬浮显示DIV的ID
万次阅读 2019-01-16 08:54:18
; height:50px;...JS代码：调用Hover事件并遍历所有DIV $(function () { $("div").hover(function () { var id = $(this).attr("id"); alert(id); }) }) 效果图如下：鼠标悬浮显示ID
收起
ASP.NET C#
JS-鼠标光标指针悬停事件
千次阅读 2020-03-24 13:06:58
// 当鼠标从元素上移开时事件！ $("#selected").mouseout(function(){ $("#selected").removeClass("border"); $("#selected").css("border","1px solid #AAAAAA"); }); // 当鼠标指针位于元素上方...
收起
js实现鼠标悬停图片上时滚动文字说明的方法
2020-10-24 17:11:12
主要介绍了js实现鼠标悬停图片上时滚动文字说明的方法,涉及js操作鼠标事件的使用技巧,需要的朋友可以参考下
收起
关于Jquery的鼠标悬停事件
2013-02-01 09:14:00
1.悬停事件：是指当鼠标移动到上面的时候，触发一个事件，当鼠标移出的时候触发另一个事件。效果图见附件 JS代码： $(function(){ Hover("tableTest")//调用方法 }) var Hover=function(id){ $(&...
收起
js设置鼠标悬停改变背景色实现详解
2020-12-29 10:01:22
看了网上那么多的js鼠标悬停时事件，大多数的，说了那么多话，也没解决什么问题，现在直接贴上代码，以供参考 html: <div id=sign>this is test! css:　 <style type=text/css> .out{background-color: gray...
收起
JavaScript基础15-JS操作页面_鼠标悬停和页面加载事件
2019-10-22 18:04:13
本文介绍鼠标悬停和页面加载事件举例。 onmouseover 鼠标悬停 onmouseout 鼠标离开 onLoad 页面加载鼠标悬停，弹出alert框。 <!DOCTYPE html> <html>...鼠标悬停事件</ti...
收起
帆软JS鼠标悬停列标题高亮显示/改变选中行行高
2019-08-22 20:50:25
$("td").mouseover(function(){ //鼠标移入悬浮在单元格上事件 var id=$(this).attr("id"); //获取鼠标当前所在单元格的id var num=id.search("-"); //获取id中“-”符号第一次出现的索引位 var id1=id.substr(0,num...
收起
JS鼠标事件（监听鼠标点击/释放，鼠标悬停/离开等）
万次阅读 2015-01-27 22:44:23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Javascript 事件 body {background-color:#eeeeee} div.greenBtn
收起
js设置鼠标悬停改变背景色
2019-12-27 20:26:51
本文转载自：...看了网上那么多的js鼠标悬停时事件，大多数的，说了那么多话，也没解决什么问题，现在直接贴上代码，以供参考 html: <div id="sign">this is test!</div> css:　 ...
收起
设置背景
js 特效 html 特效 鼠标悬停变颜色和js事件表格导出
2020-06-19 17:35:17
1、javascript制作表格行高亮显示效果（注意：JS放到body最下，避免JS不生效。） ...depth_1-utm_source=distribute.pc_relevant.none-task-blog-Bl
收起
js实现鼠标悬停一定时间后触发事件--淘宝例子
千次阅读 2017-09-26 21:53:07
运行截图 ... // 每一个li鼠标进入事件 ... // 添加鼠标移出事件，保证离开的时候清除延迟器，不影响下一次操作 liList[index].onmouseleave = function (eve) { clearTimeout(timer); }; }
收起
JS基础(二)事件监听练习之table鼠标悬停行变色
2019-10-06 11:06:49
JS监听事件简单学习: 　[object].addEvent("事件类型","处理函数","冒泡事件或捕获事件");　[object].removeEvent("事件类型",...　鼠标悬停在行上的时候，触发事件，背景颜色变成红色。效果如图: JavaScri...
收起
聊天框js+鼠标悬停+回调(递归)函数
2020-05-03 17:09:29
一、鼠标右击或悬停事件 1.梳理思路+实现功能 (1) 业务：给工作台聊天框中访客发送的消息添加“鼠标悬停在上面，触发事件”； (2) 思路：首先在本地搞个小程序测试下鼠标悬停的实现方法，看看实现代码怎么写；第...
收起
javascript html jquery
Frozenframe.js：freezeframe.js是一个库，可暂停动画的.gifs并使它们能够在鼠标悬停鼠标单击触摸事件或...
2021-02-05 22:07:39
Freezeframe.js是一个库，可暂停动画的.gifs并使它们能够在鼠标悬停/鼠标单击/触摸事件或手动触发时进行动画处理。 v5-TypeScript Freezeframe现在使用/编写TypeScript！该库仍将支持JavaScript中的用法，但是...
收起
jquery鼠标键盘悬停事件，形变动画和淡入淡出
2018-12-06 10:52:00
鼠标和键盘悬停 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...鼠标悬停</title> <script type="text/javascript" src='./js/jquery.mi...
收起
CSS3鼠标悬停线条遮罩效果特效代码
2021-03-20 03:28:55
CSS3鼠标悬停线条遮罩效果代码是一款基于js+css3实现的jQuery鼠标悬停事件特效。
收起

Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件

Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件

jquery实现：https://blog.csdn.net/weixin_44657829/article/details/106043946

html实现：https://blog.csdn.net/weixin_44657829/article/details/105326856

js鼠标悬停事件_鼠标悬停出现提示信息怎么做

操作步骤

准备工资条报表模板

模板中设置静态信息提示（WEB–提示）

预览报表结果

js——设置鼠标悬停事件

JS小技巧：鼠标悬停事件

简单的JS悬停图片变换

代码如下

鼠标悬停事件_【CSS】鼠标悬停tips的实现

用js给div添加鼠标悬停事件

web自动化之鼠标悬停事件

jtopo鼠标悬停事件与画线操作的冲突

前台JS：通过Hover（鼠标悬停事件）动态悬浮显示DIV的ID

JS-鼠标光标指针悬停事件

js实现鼠标悬停图片上时滚动文字说明的方法

关于Jquery的鼠标悬停事件

js设置鼠标悬停改变背景色实现详解

JavaScript基础15-JS操作页面_鼠标悬停和页面加载事件

帆软JS鼠标悬停列标题高亮显示/改变选中行行高

JS鼠标事件（监听鼠标点击/释放，鼠标悬停/离开等）

js设置鼠标悬停改变背景色

js 特效 html 特效鼠标悬停变颜色和js事件表格导出

js实现鼠标悬停一定时间后触发事件--淘宝例子

JS基础(二)事件监听练习之table鼠标悬停行变色

聊天框js+鼠标悬停+回调(递归)函数

Frozenframe.js：freezeframe.js是一个库，可暂停动画的.gifs并使它们能够在鼠标悬停鼠标单击触摸事件或...

jquery鼠标键盘悬停事件，形变动画和淡入淡出

CSS3鼠标悬停线条遮罩效果特效代码

js鼠标悬停事件

Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件

Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件

jquery实现：https://blog.csdn.net/weixin_44657829/article/details/106043946

html实现：https://blog.csdn.net/weixin_44657829/article/details/105326856

js鼠标悬停事件_鼠标悬停出现提示信息怎么做

操作步骤

准备工资条报表模板

模板中设置静态信息提示（WEB–提示）

预览报表结果

js——设置鼠标悬停事件

JS小技巧：鼠标悬停事件

简单的JS悬停图片变换

代码如下

鼠标悬停事件_【CSS】鼠标悬停tips的实现

用js给div添加鼠标悬停事件

web自动化之鼠标悬停事件

jtopo鼠标悬停事件与画线操作的冲突

前台JS：通过Hover（鼠标悬停事件）动态悬浮显示DIV的ID

JS-鼠标光标指针悬停事件

js实现鼠标悬停图片上时滚动文字说明的方法

关于Jquery的鼠标悬停事件

js设置鼠标悬停改变背景色实现详解

JavaScript基础15-JS操作页面_鼠标悬停和页面加载事件

帆软JS鼠标悬停列标题高亮显示/改变选中行行高

JS鼠标事件（监听鼠标点击/释放，鼠标悬停/离开等）

js设置鼠标悬停改变背景色

js 特效 html 特效 鼠标悬停变颜色和js事件表格导出

js实现鼠标悬停一定时间后触发事件--淘宝例子

JS基础(二)事件监听练习之table鼠标悬停行变色

聊天框js+鼠标悬停+回调(递归)函数

Frozenframe.js：freezeframe.js是一个库，可暂停动画的.gifs并使它们能够在鼠标悬停鼠标单击触摸事件或...

jquery鼠标键盘悬停事件，形变动画和淡入淡出

CSS3鼠标悬停线条遮罩效果特效代码

js鼠标悬停事件

js 特效 html 特效鼠标悬停变颜色和js事件表格导出