侧边栏鼠标移入显示，移除消失

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #e-coder{            background: url("1.jpg") no-repeat;            background-size: 50px 50px;            position: fixed;            top: 40%;            left: 0;            width: 500px;            height: 500px;        }        #e-app{            width: 300px;            position: absolute;            left:60px;            top: -50px;            display: none;

}    </style></head><body><div id="e-coder">    <div id="e-app">        <img src="2.jpg" alt="公众号">    </div></div><script>    window.onload=function(){        var coder=document.getElementById(‘e-coder‘);        var app=document.getElementById(‘e-app‘);        coder.onmouseover=function(){            app.style.display=‘block‘;            this.style.background="url(4.jpg) no-repeat";        }        coder.onmouseout=function(){            app.style.display=‘none‘;            this.style.background="url(1.jpg) no-repeat";        }    }</script></body></html>

原文地址：https://www.cnblogs.com/yuanyuan-1994/p/9015388.html

时间： 2024-11-12 17:09:45

侧边栏鼠标移入显示，移除消失的相关文章

要求:鼠标移入显示提示信息框；鼠标离开,信息框消失，消失的效果延迟

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatib

Vue2.0教你当前选中鼠标移入移除加样式，实现显示隐藏

效果如gif动态图所示: 1.通过v-for遍历数组 HTML代码: 1 <template> 2 <div class="nav"> 3 <div class="nav-item" v-for="(item,index) in items" :key="index" @mouseenter="mouseEnter(index)" @mouseleave="mouse

效果:当鼠标移入图片时,图片被一块半透明黑色块遮住,并显示色块上按钮或文本. 原理:1.将图片位置创建<div>,固定宽高,绝对定位,并添加溢出隐藏. 2.添加两个<div>,第一个<div>用来装图片 3.第二个<div>添加半透明黑色背景,相对定位,并设置宽高. 4.添加js动画控制. 效果图: 代码: 引入jquery. css: ul{list-style: none;} ul>li{width: 100px;height: 120px;te

转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该节点的全称,这里我们以title名称为例吧,示例代码如下所示: view sourceprint? 1.{ id:233, pId:23, name:"叶子节点233...",title:"叶子节点23333434343434"}, 2.{ id:234, pId:23

鼠标移入移出事件

鼠标移入移出事件: mouseover:鼠标移入到目标元素的上方,在其子元素上时也会触发,.所以说也就是说会产生冒泡. <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style> .parent{height: 400px; width: 400px;border: 1px solid red;}

HTML5+CSS3鼠标移入移出图片生成随机动画

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转上下移动缩放由于时间关系我就不一步步解析各段代码所代表含义,我这里就给出一些思路及关键代码: 1.首先使用ul li展现4张图片本示例中不仅使用了图片,在图片表面还放置了一段“WEB”字样文字,用于与图片实现隐藏或显示效果,故html中每张图片上方加入: <div class="mytext">WEB</div&g

AXURE 图片轮播效果与鼠标移入变色效果

一.轮播 1.选择图片插入→右键单击图片→点击转换为动态面板→双击图片增加状态,轮播多少图就加多少个状态. 2.双击页面属性栏页面交互下的页面载入时→设置面板动态→选择状态2(因为第一个状态是默认的,如果选择将不会循环轮播). 3.双击控件栏状态面板改变时→添加条件为动态面板状态=状态2后确定→设置面板状态→将所有状态全部加上,设好方式和时间,完毕(注意:状态2要添加在最后,其他图片添加顺序随意). 二.鼠标移入指定区域变色(这里指指定区域要回馈动作.如本页的导航当你鼠标移入文文章时,变成白色,

表格隔行变色以及鼠标移入高亮显示

功能描述: 实现表格奇数行和偶数行背景颜色不一样,以及鼠标移入时,移入行高亮显示. 实现效果: 编码思路: 遍历表格行,如行号为为奇数,设置背景颜色为灰色,行号为偶数,设置背景颜色为空. 设置表格每行的鼠标移入和移出事件. 鼠标移入时,保存当前背景颜色并设置背景颜色为绿色. 鼠标移出时,还原保存的背景颜色. 代码示例:

认清鼠标移入移出事件

本文也同步发表在我的公众号"我的天空" 鼠标的移入移出事件,是在我们做一些前端效果时使用相当频繁的事件,但在JS中,鼠标的移入移出事件有两对,分别是mouseover.mouseout:以及mouseenter.mouseleave,如果没有对其的区别有清新的认识话,则很容易掉坑里! 譬如某次有人反映需要做以下这么一个效果:当鼠标移入背景图片时,将有一个遮罩层升起,当鼠标移出后,遮罩层落下(如图),该效果还是很常见的: 其采用jquery的animate()结合鼠标的移入移出事件来处理