1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>xuanting</title>
  6. <style type="text/css">
  7. #a
  8. {
  9.     background-image:url(image/index-lhd-1-2880x1480.jpg);
  10.     background-size:1000px 500px;
  11.     background-position:center;
  12.  
  13.     width:1000px;
  14.     height:500px;
  15.     border:1px solid #000;
  16.     position:relative;
  17.     top:100px;
  18.     margin:auto;
  19.     overflow:hidden;
  20.     cursor:pointer;
  21. }
  22. /*#a:hover
  23. {
  24.  
  25.     background-size:1200px 600px;
  26.     background-position:center;
  27.     transition:0.7S;
  28.     cursor:pointer;
  29. }*/
  30. #b
  31. {
  32.     width:300px;
  33.     height:25px;
  34.     position:relative;
  35.     top:400px;
  36.     margin:auto;
  37.     font-family:"微软雅黑";
  38.     font-size:18px;
  39.     text-align:center;
  40.     overflow:hidden;
  41.     cursor:pointer;
  42.         }
  43.  
  44. </style>
  45. </head>
  46.  
  47. <body>
  48. <div id="a" onmouseout="yi()" onmouseover="fu()">
  49. <div id="b" onmouseout="yi()" onmouseover="fu()">
  50. <span>2017雷克萨斯全球设计大奖</span><br />
  51. <span>旨在为新锐设计师们提供机会</span><br /><br />
  52.  
  53. <span>查看详情&nbsp;&nbsp;&nbsp;></span>
  54. </div>
  55. </div>
  56. </body>
  57. </html>
  58. <script>
  59. function yi()
  60. {
  61.     document.getElementById("a").style.backgroundSize="1000px 500px";
  62.     document.getElementById("a").style.transition="0.7s";
  63.     document.getElementById("b").style.transition="0.7s";
  64.     document.getElementById("b").style.overflow="hidden";
  65. }
  66. function fu()
  67. {
  68.     document.getElementById("a").style.backgroundSize="1200px 600px";
  69.     document.getElementById("a").style.backgroundPosition="center";
  70.     document.getElementById("a").style.transition="0.7s";
  71.     document.getElementById("a").style.cursor="pointer";
  72.     document.getElementById("b").style.transition="2s";
  73.     document.getElementById("b").style.cursor="pointer";
  74.     document.getElementById("b").style.overflow="visible";
  75. }
  76. </script>

js写当鼠标悬浮及移开出现背景变化的更多相关文章

  1. JS事件之鼠标悬浮窗（鼠标悬浮窗抖动问题的解决）

    鼠标进入显示悬浮窗,思路有简单有困难. 首先要注意的是我们要给悬浮窗设置position为absolute,不然我们改了 style.left style.top发现没有变化很尴尬.其余的内容看起来就 ...

  2. 用js写一个鼠标坐标实例

    HTML代码 写一个div来作为鼠标区域 div中写一个span显示坐标信息 <body> <div id=""> <span></spa ...

  3. JavaScript、tabel切换完整版—自动切换—鼠标移入停止-移开运行

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JS事件 鼠标移开事件（onmouseout）鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

    鼠标移开事件(onmouseout) 鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序. 当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout ...

  5. QT QCharts QScatterSeries 空心点阵图，鼠标移动到上面显示数值，鼠标移开数值消失

    在最近接到的需求是这样的,画一个折线图,关键点使用空心的圆点标识出来,鼠标移动到关键点上,显示出当前数值:鼠标移走数值消失. 我们遇到这个需求的时候,第一时间就会想到使用 QLineSeries 画折 ...

  6. 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  7. CSS/JS图片鼠标悬浮一道光闪过

    看到有些网站logo鼠标悬浮上面的时候,会出现一道光,一闪而过,刚开始以为是gif图,已审查, 居然不是:现在就实现在这种效果: 先看看CSS实现的效果图: 看到没,就是这道刺眼的白光....   啊 ...

  8. WinForm 鼠标进入移开窗体事件，因子控件导致的误触发

    /// <summary> /// 重写OnControlAdded方法,为每个子控件添加MouseLeave事件 /// </summary> /// <param n ...

  9. [修正] Firemonkey SpeedButton 鼠标移开按钮后 IsPressed 为 False 的问题

    未修正: 修正代码: 请将 FMX.StdCtrls.pas 复制到自己的工程目录下,再修改如下代码: procedure TCustomButton.RestoreButtonState; begi ...

随机推荐

  1. C语言字符串长度（转）

    C语言字符串长度的计算是编程时常用到的,也是求职时必考的一项. C语言本身不限制字符串的长度,因而程序必须扫描完整个字符串后才能确定字符串的长度. 在程序里,一般会用strlen()函数或sizeof ...

  2. 4.0 和4.5 app 和generic,xaml的问题

    4.0里面不支持Generic.xaml里面 <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source=& ...

  3. 使用canvas实现擦玻璃效果---转载

    <!DOCTYPE html> <html> <head lang="zh"> <meta name="viewport&quo ...

  4. 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 ...

  5. 【T_SQL】 基础

    一.T-SQL 的组成 1.DML(数据操作语言 Data Manipulation Language)               查询.插入.删除和修改数据库中的数据.SELECT.INSERT. ...

  6. css -- 元素消失

    元素从屏幕消失的方法: A:display:none B:opacity C:visibility D:text-intent:-10000em; E:margin可远可远了 F:position:a ...

  7. css3 -- 浏览器支持

    浏览器支持的前缀: 1.浏览器兼容前缀 -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-transform:rotate(-3deg) ...

  8. set UVA 11136 Hoax or what

    题目传送门 题意:训练指南P245 分析:set维护,查询删除最大最小值 #include <bits/stdc++.h> using namespace std; typedef lon ...

  9. LightOJ1017 Brush (III)（DP）

    题目大概说一个平面上分布n个灰尘,现在要用一个宽w的刷子清理灰尘:选择一个起点,往水平线上扫过去这个水平线上的灰尘就消失了.问最多进行k次这样的操作能清理最多多少灰尘. 没什么的DP. 先按垂直坐标给 ...

  10. HDU3157 Crazy Circuits（有源汇流量有上下界网络的最小流）

    题目大概给一个电路,电路上有n+2个结点,其中有两个分别是电源和负载,结点们由m个单向的部件相连,每个部件都有最少需要的电流,求使整个电路运转需要的最少电流. 容量网络的构建很容易,建好后就是一个有源 ...