js写当鼠标悬浮及移开出现背景变化
- <!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">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>xuanting</title>
- <style type="text/css">
- #a
- {
- background-image:url(image/index-lhd-1-2880x1480.jpg);
- background-size:1000px 500px;
- background-position:center;
- width:1000px;
- height:500px;
- border:1px solid #000;
- position:relative;
- top:100px;
- margin:auto;
- overflow:hidden;
- cursor:pointer;
- }
- /*#a:hover
- {
- background-size:1200px 600px;
- background-position:center;
- transition:0.7S;
- cursor:pointer;
- }*/
- #b
- {
- width:300px;
- height:25px;
- position:relative;
- top:400px;
- margin:auto;
- font-family:"微软雅黑";
- font-size:18px;
- text-align:center;
- overflow:hidden;
- cursor:pointer;
- }
- </style>
- </head>
- <body>
- <div id="a" onmouseout="yi()" onmouseover="fu()">
- <div id="b" onmouseout="yi()" onmouseover="fu()">
- <span>2017雷克萨斯全球设计大奖</span><br />
- <span>旨在为新锐设计师们提供机会</span><br /><br />
- <span>查看详情 ></span>
- </div>
- </div>
- </body>
- </html>
- <script>
- function yi()
- {
- document.getElementById("a").style.backgroundSize="1000px 500px";
- document.getElementById("a").style.transition="0.7s";
- document.getElementById("b").style.transition="0.7s";
- document.getElementById("b").style.overflow="hidden";
- }
- function fu()
- {
- document.getElementById("a").style.backgroundSize="1200px 600px";
- document.getElementById("a").style.backgroundPosition="center";
- document.getElementById("a").style.transition="0.7s";
- document.getElementById("a").style.cursor="pointer";
- document.getElementById("b").style.transition="2s";
- document.getElementById("b").style.cursor="pointer";
- document.getElementById("b").style.overflow="visible";
- }
- </script>
js写当鼠标悬浮及移开出现背景变化的更多相关文章
- JS事件之鼠标悬浮窗(鼠标悬浮窗抖动问题的解决)
鼠标进入显示悬浮窗,思路有简单有困难. 首先要注意的是我们要给悬浮窗设置position为absolute,不然我们改了 style.left style.top发现没有变化很尴尬.其余的内容看起来就 ...
- 用js写一个鼠标坐标实例
HTML代码 写一个div来作为鼠标区域 div中写一个span显示坐标信息 <body> <div id=""> <span></spa ...
- JavaScript、tabel切换完整版—自动切换—鼠标移入停止-移开运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS事件 鼠标移开事件(onmouseout)鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。
鼠标移开事件(onmouseout) 鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序. 当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout ...
- QT QCharts QScatterSeries 空心点阵图,鼠标移动到上面显示数值,鼠标移开数值消失
在最近接到的需求是这样的,画一个折线图,关键点使用空心的圆点标识出来,鼠标移动到关键点上,显示出当前数值:鼠标移走数值消失. 我们遇到这个需求的时候,第一时间就会想到使用 QLineSeries 画折 ...
- 利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动
查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...
- CSS/JS图片鼠标悬浮一道光闪过
看到有些网站logo鼠标悬浮上面的时候,会出现一道光,一闪而过,刚开始以为是gif图,已审查, 居然不是:现在就实现在这种效果: 先看看CSS实现的效果图: 看到没,就是这道刺眼的白光.... 啊 ...
- WinForm 鼠标进入移开窗体事件,因子控件导致的误触发
/// <summary> /// 重写OnControlAdded方法,为每个子控件添加MouseLeave事件 /// </summary> /// <param n ...
- [修正] Firemonkey SpeedButton 鼠标移开按钮后 IsPressed 为 False 的问题
未修正: 修正代码: 请将 FMX.StdCtrls.pas 复制到自己的工程目录下,再修改如下代码: procedure TCustomButton.RestoreButtonState; begi ...
随机推荐
- C语言字符串长度(转)
C语言字符串长度的计算是编程时常用到的,也是求职时必考的一项. C语言本身不限制字符串的长度,因而程序必须扫描完整个字符串后才能确定字符串的长度. 在程序里,一般会用strlen()函数或sizeof ...
- 4.0 和4.5 app 和generic,xaml的问题
4.0里面不支持Generic.xaml里面 <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source=& ...
- 使用canvas实现擦玻璃效果---转载
<!DOCTYPE html> <html> <head lang="zh"> <meta name="viewport&quo ...
- Oracle自动备份脚本(网上找到的资料)
废话不多说了,直接给大家贴代码了,具体代码如下所示: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...
- 【T_SQL】 基础
一.T-SQL 的组成 1.DML(数据操作语言 Data Manipulation Language) 查询.插入.删除和修改数据库中的数据.SELECT.INSERT. ...
- css -- 元素消失
元素从屏幕消失的方法: A:display:none B:opacity C:visibility D:text-intent:-10000em; E:margin可远可远了 F:position:a ...
- css3 -- 浏览器支持
浏览器支持的前缀: 1.浏览器兼容前缀 -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-transform:rotate(-3deg) ...
- set UVA 11136 Hoax or what
题目传送门 题意:训练指南P245 分析:set维护,查询删除最大最小值 #include <bits/stdc++.h> using namespace std; typedef lon ...
- LightOJ1017 Brush (III)(DP)
题目大概说一个平面上分布n个灰尘,现在要用一个宽w的刷子清理灰尘:选择一个起点,往水平线上扫过去这个水平线上的灰尘就消失了.问最多进行k次这样的操作能清理最多多少灰尘. 没什么的DP. 先按垂直坐标给 ...
- HDU3157 Crazy Circuits(有源汇流量有上下界网络的最小流)
题目大概给一个电路,电路上有n+2个结点,其中有两个分别是电源和负载,结点们由m个单向的部件相连,每个部件都有最少需要的电流,求使整个电路运转需要的最少电流. 容量网络的构建很容易,建好后就是一个有源 ...